I have come across a weird problem where floated elements wrap to the next line when there is still plenty of space for them.
I realize this can be solved by removing the < p > or the < div > but I want clean valid code.
Most importantly I want to know why this is happening.
HTML:
<div class="section" style="width: 8000px;">
<div style="" class="bottom">
<div class="img6"></div>
<p class="n">
</p>
</div>
</div>
CSS:
p.n{margin:0;}
div.section{width: 8000px;}
div.section:after{content:"";display:block;clear:left;}
div.section div{float:left;}
a.b{display:block;float:left;}
div.img6{background:#933;width:78px;height:15px;}
a.t1{background:#123;width:74px;height:15px;}
a.t2{background:#456;width:86px;height:15px;}
a.t3{background:#555;width:92px;height:15px;}
a.t4{background:#786;width:126px;height:15px;}
Or you can see it here at JSbin
One interesting thing worth noting is that no matter how many elements you add only the last one is wrapped.
This is happening because the p is not floated left. If you inspect the elements with for example firebug, you will see that the wrapper div.bottom has the exact width of it´s largest, unfloated, block level element, p.n, 378px.
If you float p.n as well, your problem is solved.
The problem is that floating the .bottom div left reduces its width and therefore everything it contains. Try changing div.section div {float: left} to div.bottom div {float:left}.
If you need to float everything, consider floating the external content right and/or specify fixed widths.
Related
This is driving me mental.
Why wont my third div (content-col-text) not go up on float right?
It stays aligned to the gallery-thumb-container? I need it to go to the right and up and align with large-image-container - this is where the outer div wrapper is (entry-content)..
I dont have any weird margin stuff going on even..
Your order is not correct. You need to change it as below for it to work.
Below is the code:
The HTML:
<div class="large-image-container"> </div>
<div class="content-col-text"> </div>
<div class="gallery-thumb-container"> </div>
The CSS:
.large-image-container{float:left; width:66%; background:red;}
.gallery-thumb-container{float:left; width:66%; background:yellow;}
.content-col-text{float:right; width:31%; background:green;}
The Fiddle demo:
DEMO
Usually, under such circumstances, when you use a clear:both;, the floats get corrected and it works properly.
Hope this helps.
your gallery-thumb-container has probably been forced down as it floats left and there's no more space to the right of large-image-container.
You could try switching the order of the <div>'s and put content-col-text second instead of third
Another option would be to position it absolutely, but that will take it out of the flow of the document...
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 am having a hard time grasping the concept of vertical margins collapsing in nested elements. I came an article at http://www.howtocreate.co.uk/tutorials/css/margincollapsing explaining how it works however am confused by its explanation. So in its example it cites that there are 2 elements as follows
<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div>
Seeing that the inner div has a margin of 20px, that is what will be applied for the entire block of code. What confuses me is everything after that and not yet looking about issues with Internet Explorer 7. Would someone be able to explain it for a complete newbie to CSS in a simplified manner?
Two-ish rules to remember:
If margins touch, they collapse.
Nested items "snuggle" if only margin separates them.
Elements outside the "Flow" behave differently. That is, this behavior does not apply the same to floated, or position:fixed, or position:absolute elements.
So for this HTML (nested divs) :
<div id="outer">
<div id="inner">
A
</div>
</div>
and this initial CSS:
#outer {
margin-top:10px;
background:blue;
height: 100px;
}
#inner {
margin-top:20px;
background:red;
height: 33%;
width: 33%;
}
The margin collapses to the max of the touching margins and the nested div "snuggles" to the start of the container, like so: (See it at jsFiddle.)
But, the moment the two margins are separated -- by a border or by preceding content in the container, for example -- the margins no longer touch, so they no longer collapse.
EG, just a little, non-breaking white-space , like so:
<div id="outer">
<div id="inner">
A
</div>
</div>
kills the collapse : (See that at jsFiddle.)
Using a border, instead of leading text : (Fiddle)
A diagram may help:
In case it wasn't obvious: blue = outer div, red = inner div; I've drawn them with constant height and horizontal positioning. You can work out what happens if the height is fitted to the contents etc.
The "Before collapsing" column shows what you get if the margins aren't considered adjacent, e.g. if you draw the border of the blue/outer div; but if there is no border, then you get the "After collapsing" column. The top row switches the two margins around from the example, because I think the behaviour in this case is more intuitive; the bottom one shows the example at howtocreate and is consistent with the top row.
Two-ish rules to remember:
If margins touch, they collapse. Nested items "snuggle" if only margin separates them. Elements outside the "Flow" behave differently. That is, this behavior does not apply the same to floated, or position:fixed, or position:absolute elements.
Brock Adams is correct, but I also wanted to add that "overflow:hidden" can also prevent nested margins from collapsing.
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)
Any ideas how I get rid of white space on my IE browser. It is caused by a hidden div. When I remove the div the white space goes. Works fine in FF.
Here is the DIV:
<div class="hidden" id="popup">
<div>
<H1 class="center" id="popupTitle"></H2><br/><br/><br/>
<div style="position:relative; display:inline;">
<p id="popupText" style="float: left"></p>
<img id="popupImage" style="float: right"></img>
</div>
</div>
</div>
Here are the styles associated with it:
.ofCommunications .hidden { display:none; visibility: hidden; }
I am also trying to get the p and the img inside the third div to display on the same line but that doesn't seem to be working either.
Thanks in advance
Caroline
The spacing problem is most likely caused by your improperly closed tag ("") as well as using both display: none; and visibility: hidden;
Visibility will cause the element to still take up space so you need to get rid of that style.
If you make those adjustments it should work unless you have other issues not seen in the code provided (for example: your parent container to .hidden having a misspelled class name).
Tips:
Never create space with < br/ > tags. They're only used for breaking text.
Get rid of display: inline; and position: relative; on your other < div > as it doesn't make sense to have it there (relative positioning is default).
Lowercase all of your tags. Uppercase tags are a thing of the distant past and not ideal.
A couple of comments. Once you clean this up it might help to resolve this and other future headaches:
Remove your inline styles and put them in a stylesheet.
What is that second div doing under the hidden div? It looks redundant and unnecessary to me. Remove it.
If you're floating elements then you'll need to clear them down the track. This could be why you have things floating in the wrong spots.
Have you display:block'ed the p element next to the image and given it a width? Otherwise it's not going to float anyway.
Your h1 should not be uppercase.
Hope those few suggestions help out a bit.
Try this to get the <p> and <img> lined up:
<div>
<p id="popupText" style="float: left"></p>
<p style="float: right"><img id="popupImage" /></p>
</div>
I removed the position: relative because it's not needed with the code you provided, and the display: inline because it doesn't make sense to make the div inline.
Have you checked the widths of the parent elements? If a width is set too small on a parent element there will not be enough space to render your paragraph and image on the same line. This could cause your paragraph and image to render on different lines.