Make floated elements increase wrapper height 1

[1DMF]

I seem to have the collapsing border problem I think and cannot remember how to solve it.

I have a wrapper div which isn't floated used to center everything on the page.

<div id="wrapper" style="margin:0 auto; width:800px;">
  <div style="float:left;">
   some content
  </div>
  <div style="float:left;">
   some more content
  </div>
</div>

Only the wrapper div, is zero in height and the content is floating past the wrapper div.

how do I make the wrapper div expand downwards in line with its content so I can apply a bottom padding to the wrapper div?

thanks

1DMF





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

typical, post the question and then remembered, do'h.

need to add a dummy spacer div that isn't floated to force it to beleive there is now content in the div.

<div id="wrapper" style="margin:0 auto; width:800px;">  
   <div style="float:left;">   some content  </div>  
   <div style="float:left;">   some more content  </div>
[b]<div>&nbsp;</div>[/b]
</div>

I hate that grrrrr!

If it doesn't see the floated divs going down the page, how come the floated divs adhere to the width aspect and position correctly within a 800 wide centered div.

hey ho!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[southbeach]

1DMF,

I normally give this last layer a property

<div styly="clear: both;">&nbsp;</div>

By doing so, it is like setting a hard line just under the floated layers so content is pushed and kept from overlapping.

I am sure there is a better and more technical explanation about this but this is the way I see it.



--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

Best is to read a little about it and see all the options at your disposal:

http://www.quirksmode.org/css/clearing.html

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

SouthBeach,

I guess my last post was missing the class="clear" , which I applied to it and the styling of clear:both;

Didn't mean to misslead others by that ommission sorry!


Vragabond,

Thanks, do you prefer the overflow method to the 'clearing' div option?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

1DMF, I prefer anything that works in all browsers and doesn't require extra elements. In most cases, [tt]overflow: hidden;[/tt] is an incredibly simple solution that works across all browsers. When it delivers strange results, I default to a clearing element.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

yeah I guess the clearing div method isn't really semantic!

But overflow:hidden isn't exactly correct terminology when no height is specified so is fluid.

How can you set an attibute to hide any overflow, when there will never be any overflow as you haven't set a fixed height.

Not exactly semantic either - lol



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!