how do I get my div wrapper to expand?

[Bob Imperial]

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;"><!-- wrapper -->

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

</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

[Els]

Bob Imperial wrote:

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.

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

[Bob Imperial]

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.
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.

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

[Jim Moe]

Bob Imperial wrote:

>
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>

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

[Andy Dingley]

On 30 Mar, 15:24, "Bob Imperial" <[e-mail]:

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/

[Bergamot]

Jim Moe wrote:

>
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.

--
Berg