Comments on: Div Class Clear – Without the Markup http://www.latentmotion.com/div-class-clear-without-the-markup/ Usability, Design and Front-Side Programming Thu, 02 Feb 2012 00:25:33 +0000 hourly 1 http://wordpress.org/?v=3.0.1 By: Brett Barros http://www.latentmotion.com/div-class-clear-without-the-markup/comment-page-1/#comment-100 Brett Barros Tue, 05 Jan 2010 20:07:27 +0000 http://www.latentmotion.com/?p=302#comment-100 I've used this method with some success. Setting aside the times it hasn't worked (maybe javascript / dynamic elements related?), I find that this still forces a manual manipulation of the code to make floats work. Needless to say, that's less than ideal. I've used this method with some success. Setting aside the times it hasn't worked (maybe javascript / dynamic elements related?), I find that this still forces a manual manipulation of the code to make floats work. Needless to say, that's less than ideal.

]]> By: Nico http://www.latentmotion.com/div-class-clear-without-the-markup/comment-page-1/#comment-99 Nico Tue, 05 Jan 2010 18:53:49 +0000 http://www.latentmotion.com/?p=302#comment-99 Hi,<br><br>There's a very clean way to deal with float elements and stretching the parent's background. I don't know why this is not commonly used/known. It's just THE good way to do, and I can't imagine going back to stupid solutions like "Div Class Clear" (I never liked this HTML barbarians method).<br><br>The solution is really simple : just add a "overflow: hidden" property to the parent element. That's all. And it works for all browsers !<br>Of course to have this working, the parent element must have "height: auto" (default value, so no height declared is ok) at least, or the element won't adapt it's height.<br><br>When you think about it, in fact this comportment is logical. You say the parent won't let his children overflow, than it manage to do so. And when elements are floating it's logical they stay visible, so the parent adapt it's height to include all floating children.<br><br>The overflow property is not known enough, and that's sad because it's really very powerful when you know how to use it. specially when you use floating elements.<br><br>Regards,<br><br>Nico Hi,

There's a very clean way to deal with float elements and stretching the parent's background. I don't know why this is not commonly used/known. It's just THE good way to do, and I can't imagine going back to stupid solutions like “Div Class Clear” (I never liked this HTML barbarians method).

The solution is really simple : just add a “overflow: hidden” property to the parent element. That's all. And it works for all browsers !
Of course to have this working, the parent element must have “height: auto” (default value, so no height declared is ok) at least, or the element won't adapt it's height.

When you think about it, in fact this comportment is logical. You say the parent won't let his children overflow, than it manage to do so. And when elements are floating it's logical they stay visible, so the parent adapt it's height to include all floating children.

The overflow property is not known enough, and that's sad because it's really very powerful when you know how to use it. specially when you use floating elements.

Regards,

Nico

]]> By: Brett Barros http://www.latentmotion.com/div-class-clear-without-the-markup/comment-page-1/#comment-86 Brett Barros Tue, 05 Jan 2010 14:07:27 +0000 http://www.latentmotion.com/?p=302#comment-86 I've used this method with some success. Setting aside the times it hasn't worked (maybe javascript / dynamic elements related?), I find that this still forces a manual manipulation of the code to make floats work. Needless to say, that's less than ideal. I've used this method with some success. Setting aside the times it hasn't worked (maybe javascript / dynamic elements related?), I find that this still forces a manual manipulation of the code to make floats work. Needless to say, that's less than ideal.

]]> By: Nico http://www.latentmotion.com/div-class-clear-without-the-markup/comment-page-1/#comment-85 Nico Tue, 05 Jan 2010 12:53:49 +0000 http://www.latentmotion.com/?p=302#comment-85 Hi,<br><br>There's a very clean way to deal with float elements and stretching the parent's background. I don't know why this is not commonly used/known. It's just THE good way to do, and I can't imagine going back to stupid solutions like "Div Class Clear" (I never liked this HTML barbarians method).<br><br>The solution is really simple : just add a "overflow: hidden" property to the parent element. That's all. And it works for all browsers !<br>Of course to have this working, the parent element must have "height: auto" (default value, so no height declared is ok) at least, or the element won't adapt it's height.<br><br>When you think about it, in fact this comportment is logical. You say the parent won't let his children overflow, than it manage to do so. And when elements are floating it's logical they stay visible, so the parent adapt it's height to include all floating children.<br><br>The overflow property is not known enough, and that's sad because it's really very powerful when you know how to use it. specially when you use floating elements.<br><br>Regards,<br><br>Nico Hi,

There's a very clean way to deal with float elements and stretching the parent's background. I don't know why this is not commonly used/known. It's just THE good way to do, and I can't imagine going back to stupid solutions like “Div Class Clear” (I never liked this HTML barbarians method).

The solution is really simple : just add a “overflow: hidden” property to the parent element. That's all. And it works for all browsers !
Of course to have this working, the parent element must have “height: auto” (default value, so no height declared is ok) at least, or the element won't adapt it's height.

When you think about it, in fact this comportment is logical. You say the parent won't let his children overflow, than it manage to do so. And when elements are floating it's logical they stay visible, so the parent adapt it's height to include all floating children.

The overflow property is not known enough, and that's sad because it's really very powerful when you know how to use it. specially when you use floating elements.

Regards,

Nico

]]> By: Dave http://www.latentmotion.com/div-class-clear-without-the-markup/comment-page-1/#comment-66 Dave Tue, 01 Dec 2009 12:06:34 +0000 http://www.latentmotion.com/?p=302#comment-66 I always use the div clear to stretch background to end of content. Great piece of code. I always use the div clear to stretch background to end of content. Great piece of code.

]]>