I have this sample code:
<html>
<head>
</head>
<body>
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</body>
</html>
The contents of div 2 is placed left of the contents of div 1 (fine), but the border of div 2 contains div 1. This happen in all tested browsers (Firefox 26.0 and IE8).
Demo
Can you please explain what is going on?
Because you aren't floating another div - Demo
And since it's not floated, it will take entire horizontal space, also it won't shift down as you aren't clearing your floats.
So what happens is the floated div just sits to the left, making your non floated div wrap around it..
If you move the order of your div in the markup, you will understand what I meant - Demo So, as you see, the top div takes all the horizontal space available, whereas the other div sits on the left, won't take entire horizontal space as it's floated to the left, so since you have the floated div first and next is non floated div it will take up 100% space, but will wrap around the floating div since you haven't cleared it, so you should float the next div as well.
The same effect can be achieved using display: inline-block; as well.
For more information on how floats work, refer my answer here
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black; float: left;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
Related
I want a Text with an vertical line below it, right to this constellation i want a floating div. I dont want to set fixed widths. What i tried is this:
<div>
huhu
<hr class="green" />
<div style="float: right">right</div>
</div>
what i want is the text+hr flow around the red box, is this possible?
This is possible; however, the code you've given won't work without a small modification.
You need to have the right-floating div before the content that you want to wrap around it --
http://jsfiddle.net/S9mmU/1/
To ensure that the floated div never takes up more than half the screen, you can use the max-width property - max-width:50%;
<div>
<div style="float: right; max-width:50%; border:2px solid red; padding:2em; margin:1em;">right</div>
huhu
<hr class="green" />
</div>
I've added the red border, a margin, and some padding so that you can see the effect. It should go without saying that none of these should be inline styles in practice.
Use the border-bottom instead of tag and set overflow:hidden.
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
I have a website I am developing.
I have this div with another div inside of it named 'second'.
I want the first div to be the same height as 'second'.
So I make the height: of the first div: height:auto; but that doesnt work, that makes it shorter then 'second'. How do I set the height of the first div to match the 'second' div?
The reason why the height needs to be the same as 'second'is because 'second' has expanding content in it.
There are some reasons the outer div doesn't span as the inner does.
.second is floated. If that's that case add <div style="clear:both"></div> just before the outer div is closed.
.second is absolutely positioned. There's no way to resolve that issue.
Try setting padding to 0 and margin to 0 as well.
You can ignore the height.
this code below worked for me.
<html>
<head>
</head>
<body>
<div style="border:1px solid #ccc;margin:0px;padding:0px;">
<div style="border:1px solid #000;height:100px;">
</div>
</div>
</body>
</html>
I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
</div>
</div>
thank you!
You must clear the floats so the parent can surround them.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
<!--HERE IS THE CLEARING DIV: -->
<div style="clear: left;"></div>
</div>
</div>
You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.
EXPLANATION:
When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.
You don't need to force-clear the floats - you need only to define the overflow for any position:relative div. Overflow:hidden and overflow:auto close the div without any further intervention, on everything from IE6 up.
Change the first line to:
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>
and it'll accomplish the same thing as forcing the div closed.
So I have a small div for the border, and three divs inside (see image at end). Green is full size (minus padding etc); Blue should float left and have specific width; Red should float right and also have a specific width. However I'm messing something up. Both of the blue and red divs float outside the main div. What am I doing wrong here?
Here's my current code:
<div style="border: 2px solid black; width: 630px;">
<div style="width:auto;">Lorem ipsum</div>
<div style="width:150px; float:left;">This is the blue box</div>
<div style="width:150px; float:right;">This is the red box</div>
</div>
Ideal Float http://www.mfrl.org/images/howtofloat.png
Positioning of floats is funny. Basically, the main div is not taking into account the height of the floated elements when figuring out its own height. The easiest way to resolve this is to add a clearing element after the floated elements.
This fiddle should explain itself clearly: http://jsfiddle.net/QQxb3/2/
I think that the folks who commented on your post saying that it does work must have misunderstood what you mean by "main div", because specification, which Chrome does follow and IE follows in this particular instance, would place the floated elements outside of its parent div.