Geek Answers Handbook

How to avoid empty clear divs?

I have been using a lot of floats lately:

<div id="buttons"> <input type="button" id="btn1" value="Button One"> <input type="button" id="btn2" value="Button Two"> <input type="button" id="btn3" value="Button Three"> </div>

Sometimes I will float the button on the right. Sometimes I will swim all to the right. This is where the problem begins. This really resets the thread if I do this, so I must continue to insert them:

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

in the end. This drops the layout, if I'm not floating for everything.

Is there a good solution for this?

+4
source share
5 answers

Yes, use overflow: hidden in the container, i.e.:

 <style type="text/css"> #buttons { overflow: hidden; } </style>
+12
source

This is a big part of the CSS learning curve. When you float elements, their containing element no longer takes into account the vertical height of the floating elements. There are several solutions you could use to get around your dilemma.

Just specify the height for the #button container at the height of your buttons:

 #button { height: 30px; }

The best solution would be clearfix hack. It is pretty bulletproof and will also do the trick without having to add extra markup and inline CSS.

 #buttons:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #buttons { display: inline-block; } html[xmlns] #buttons { display: block; } * html #buttons { height: 1%; }
+9
source

When you float elements with CSS, they are removed from the state of the natural flow of the page.

If they are in the DIV container, this will cause the element to move and its parent will not see where the children went. The container would then shrink to the box, like most of the area, as if the elements were not there in the first place.

To cover this, you must specify overflow:hidden for the container property.

By default, it is set to visible and will allow something to just “fall out” of the field if it was floating as such.

Fix this by setting this in your CSS:

 #buttons { overflow:hidden; }

This will now limit the floating elements to display within the context and limit the parent DIV .

+1
source

While you determine the parent overflow, it clears all the floats.

Use overflow: automatically on the parent device, and your welcome!

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

(I heard that this works using display: inherit, but have not tried.)

0
source

Usually, the clearfix method or the overflow: hidden installation method in the containing parent are the best.

In your specific example, you have one more option: you cannot float any of the inputs at all, and set 'text-align: right' to #buttons

 #buttons { text-align: right; }

While I rely too much on “overflow: hidden”, it’s worth noting that if you try to position any elements outside (or partially outside) the containing element on which “overflow: hidden” is set, positioned elements will be cut off at the border of the containing item. (This does not happen too often, but it is a "gotcha" to search.)

You can also find an interesting blog post, "Lessons Learned About the Clearfix CSS Hack," by Jeff Starr .

0
source

More articles:


All Articles