CSS: little float issue

Question

As you can see from the picture i want my float: right, div box that contains this video to like "be there" and not floating there, i mean i want the hr line and commentsystem(the whiteblack boxes you see) under the video, i suck at explaining but if you dont follow please comment..

heres my css

#sctryclip{
float: right;
 border: 2px solid #FF3399; 
 display: inline-block;
}

Answer 1

Try placing a

<div style="clear:both"></div>

box beneath your video box (before your "<hr />")

or maybe try this:

<hr style="clear:both" />

Answer 2

Before I start trying to answer this, I better me make sure that I understand what you are trying to do. You want both the hr and all of the comments to appear directly underneath the video. How wide do you want the left/right columns to be?

Answer 3

Try changing the width of the div with comments in it to 100% or whatever the total width of the container is.

Answer 4

If I understand you correctly, you want the "hr" to be under your video, just like a division in your layout?

If so, the problem most likely isn't at your "hr" css! It seems to me that your writing your "hr" out of place, and because of that you aren't able to place it where you wish. I believe this because your picture shows the "hr" before the video and floated to the right, leaning to the video.

Another thought, if your using some kind of container with absolute/relative position... that can mix up your results :)

Never the less, a link or your code for that area would help solving that problem, a picture lets imagination grow ;)

Answer 5

Set the containing div to

overflow: hidden;