By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,662 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

how do I get my div wrapper to expand?

P: n/a
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

Mar 30 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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/
Mar 30 '07 #2

P: n/a
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/

Mar 30 '07 #3

P: n/a
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)
Mar 30 '07 #4

P: n/a
On 30 Mar, 15:24, "Bob Imperial" <bimper...@gmail.comwrote:
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/

Mar 30 '07 #5

P: n/a
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
Mar 30 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.