Welcome to WebmasterWorld Guest from 18.205.176.100

Forum Moderators: not2easy

Message Too Old, No Replies

Using clear:both

     
3:22 pm on May 8, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1145
votes: 116


I think that maybe I'm confused on the usage of clear: both.

I have a section that looks like this:

<div id="one" style="float: left; width: 160px; height: 400px"></div>

<div id="two" style="margin-left: 180px">
<div itemscope itemtype="http://schema.org/Product">
<div id="three" style="float: left; width: 75px; height: 75px; overflow: hidden">example</div>
<div style="margin-left: 85px">
<p>Lorem ipsum, blah blah blah...</p>
<p style="float: right">sample</p>
<div style="clear: both"></div>
</div>
<div style="clear: both"></div>
</div>

<div itemscope itemtype="http://schema.org/Product">
<div id="four" style="float: left; width: 75px; height: 75px; overflow: hidden">example</div>
<div style="margin-left: 85px">
<p>Lorem ipsum, blah blah blah...</p>
<p style="float: right">sample</p>
<div style="clear: both"></div>
</div>
<div style="clear: both"></div>
</div>
<div class="clear: both"></div>
</div>

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


To me, that makes sense... after I'm done with the floating sections and want the floating to stop, I add in a clear: both.

But it doesn't work like I expected. What happens is that id=two stretches it's height to match that of id=one when it's only expected to be around 100px, pushing id=four 400px down the page.

When I remove the two clear: both styles that are nested within id=two and id=four, though, the problem goes away and the layout looks like I expected.

So what's the correct way for me to be doing this? Was I originally correct in my usage of clear: both and the layout was messing up for some other reason? Or have I been doing it wrong all along?
3:51 pm on May 8, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2662
votes: 794


I'm not sure what exactly your are trying to achieve.

But the clear:both is working as it should. When you add the clear:both, it is like drawing a line across the page. From that point on the next floated objects will start at that line. Removing the clear:both will allow the following div to be floated directly after the last floated element. In my experience float has always been a little wonky, specially when you are floating many divs.

If you are trying to position multiple boxes you may want to take a look at flexbox (it is not supported ie<11). [w3schools.com...]
4:59 pm on May 8, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4394
votes: 314


Both div=1 and div=2 are floated so if they fit on one line, they will be on one line. The div=1 creates a box that is 400px height and the div floated to its left has no assigned height. The float is cleared before div=4 so it starts over on a new line. Floats are not unpredictable, but they require planning and can seem to behave erratically in responsive layouts. (Compared to what it may seem they should do). Either flex-box or border-box layouts are more intuitive.
6:52 pm on May 8, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1145
votes: 116


Let's see if I can draw this out... if not, I'll try to show an image later.

This is what I was wanting:


| div=1 | | div = 3 |
| | |______|
| | | div = 4 |
| | |______|
| |


(where 3 and 4 are inside of a container, 2)

But this is what I was getting:


| div=1 | | div = 3 |
| | | |
| | | |
| | | |
| | |______|
| div = 4 |
|______|


Even though removing the children clear: both tags seemed to fix the problem, I don't know if that was the right fix, or a workaround. Without them, how does the system know when to stop floating the elements inside of 3 and 4?
9:58 pm on May 8, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15755
votes: 828


how does the system know when to stop floating the elements inside of 3 and 4?

Floating stops when the element stops. If your floated element might happen to be larger than the adjoining non-floated element--for example a twelve-sentence sidebar alongside a two-sentence paragraph, and you don't want the next paragraph to start before the sidebar is done--it sometimes helps to cheat. After all your interlocking floaty business, stick in a
<p class = "allclear">&nbsp;</p>
where the CSS says
p.allclear {line-height: 1px; clear: both; margin: 0; padding: 0;}
It is, like I said, cheating. But why not, if it's the easiest way to achieve what you want.

But--tangentially--make sure that floating is what you actually want. If you want two elements to display side by side, {display: table-cell;} or {display: inline-block;} may work better.
2:16 pm on May 25, 2017 (gmt 0)

New User from PK 

5+ Year Member

joined:June 8, 2012
posts: 3
votes: 0


When you float any element, browser doesn't count the floating element in document's vertical space so when you float any element, you should use clear:both in next block level element so previously floated element's container can take vertical space for floated elements.