how do I get my div wrapper to expand?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Bob Imperial - 30 Mar 2007 15:24 GMT

Hi folks!

In need of some enlightenment here, I'm trying to get my wrapper div
to expand to accommodate height-wise, to whatever content is placed in
it, no luck yet and I realize it's probably something simple, I just
don't see it yet. I have the following:

<div style="width:600px; border:1px solid #999933;">

<div style="width:150px;float:left;padding-left:4px;">Title</
div>
<div style="width:210px; float:left;">Name</div>
<div style="width:200px; float:left;"> Phone:<br /> Email:</
div>

</div>

What I'm trying to do is copy/paste the 3 inner divs with a <br />
after the 3rd but inside the wrapper, does this make sense?? Any help
would be greatly appreciated!

Bob

Reply to this Message

Els - 30 Mar 2007 15:36 GMT

> Hi folks!
>
> In need of some enlightenment here, I'm trying to get my wrapper div
> to expand to accommodate height-wise, to whatever content is placed in
> it, no luck yet and I realize it's probably something simple, I just
> don't see it yet. I have the following:

[snip code with floated elements inside wrapper element]

> What I'm trying to do is copy/paste the 3 inner divs with a <br />
> after the 3rd but inside the wrapper, does this make sense?? Any help
> would be greatly appreciated!

It would make sense, if you'd give the <br /> style="clear:both;".
The thing is that floated elements don't extend their parent's height.
Personally, I use an empty div with one space inside, with the style
'clear:both;'. This gives me more power over the height of the
'clearing element', as I can't give a <br /> any height or other
styling.

Be aware though, that this clearing element, also clears other floats
that may occur earlier in the page's code. So if you have a floated
sidebar for example, and the above mentioned wrapper div is inside the
content column of a page, the bottom of that wrappper div will extend
to below the bottom of the floated sidebar.

Signature

Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Reply to this Message

Bob Imperial - 30 Mar 2007 16:08 GMT

Thanks again! Works like a charm ...
Bob

> It would make sense, if you'd give the <br /> style="clear:both;".
> The thing is that floated elements don't extend their parent's height.
[quoted text clipped - 12 lines]
> Els http://locusmeus.com/
> accessible web design: http://locusoptimus.com/

Reply to this Message

Jim Moe - 30 Mar 2007 17:48 GMT

> In need of some enlightenment here, I'm trying to get my wrapper div
> to expand to accommodate height-wise, to whatever content is placed in
> it, no luck yet and I realize it's probably something simple, I just
> don't see it yet. I have the following:

See <http://www.positioniseverything.net/easyclearing.html>

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Bergamot - 30 Mar 2007 20:05 GMT

> See <http://www.positioniseverything.net/easyclearing.html>

Even easier, I think:
http://www.quirksmode.org/css/clearing.html

Sometimes this isn't a good choice, though, for example if you are using
negative margins.

Signature

Berg

Reply to this Message

Andy Dingley - 30 Mar 2007 18:02 GMT

> In need of some enlightenment here, I'm trying to get my wrapper div
> to expand to accommodate height-wise, to whatever content is placed in
> it,

It already is. If you use float, then that element is "taken out of
the flow" and so its container no longer needs to fit around it. It's
deliberate, not a bug.

http://brainjar.com/css/positioning/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007

how do I get my div wrapper to expand?