This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > March 2007 > how do I get my div wrapper to expand?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
how do I get my div wrapper to expand?
|
|
| Bob Imperial 2007-03-30, 7:17 pm |
| 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
| |
|
| 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 2007-03-30, 7:17 pm |
| 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 2007-03-30, 7:17 pm |
| 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 2007-03-30, 7:17 pm |
| On 30 Mar, 15:24, "Bob Imperial" <bimper...@XXXXXXXXXX> 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,
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/
| |
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|