Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2004


Tip: Looking for answers? Try searching our database.

what makes a div expand ?

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
red - 30 Oct 2004 06:27 GMT
This page shows 3 divs side by side surrounded by a wrapper, but the
wrapper thinks there's nothing in it, so its collapsed at the top. How
do I get the wrapper to expand around the divs ?
http://www.cardini.tv/test/test.htm

#p1{float:left;width:25%;border:solid 1px;}
#p2{float:left;width:25%;border:solid 1px;}
#p3{float:left;width:40%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}

red
Reply to this Message
Neal - 30 Oct 2004 06:40 GMT
> This page shows 3 divs side by side surrounded by a wrapper, but the
> wrapper thinks there's nothing in it, so its collapsed at the top. How
[quoted text clipped - 7 lines]
>
> red

Float literally means "move it to the side of the legitimate content." But
you don't have any legitimate content. So the w div is virtually empty.
Reply to this Message
red - 30 Oct 2004 07:04 GMT
>> This page shows 3 divs side by side surrounded by a wrapper, but the
>> wrapper thinks there's nothing in it, so its collapsed at the top. How
[quoted text clipped - 10 lines]
> Float literally means "move it to the side of the legitimate content."
> But you don't have any legitimate content. So the w div is virtually empty.
So how do I put a border around the three divs ?
Reply to this Message
Neal - 30 Oct 2004 07:10 GMT
>> Float literally means "move it to the side of the legitimate content."
>> But you don't have any legitimate content. So the w div is virtually
>> empty.
> So how do I put a border around the three divs ?

Havce something as actual not-positioned-out-of-it content in the div.
Preferably at the end.
Reply to this Message
red - 30 Oct 2004 07:21 GMT
>>> Float literally means "move it to the side of the legitimate
>>> content." But you don't have any legitimate content. So the w div is
[quoted text clipped - 4 lines]
> Havce something as actual not-positioned-out-of-it content in the div.
> Preferably at the end.

How do I do that ? What are you talking about ? I honestly can't figure
out what that is supposed to mean. I really really really would like to
know. I want the container to expand to surround the content of the
divs. Is this possible at all ?
Reply to this Message
Gus Richter - 30 Oct 2004 09:59 GMT
>>>> Float literally means "move it to the side of the legitimate
>>>> content." But you don't have any legitimate content. So the w div is
[quoted text clipped - 9 lines]
> know. I want the container to expand to surround the content of the
> divs. Is this possible at all ?

Try running this modified version. Comments included.

Signature

Gus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test.php</title>

   <style type="text/css">
#p1{float:left;width:25%;border:solid 1px;}
#p2{margin-left:25%;width:25%;border:solid 1px;}
#p3{float:right;width:40%;padding-right:9%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}
</style></head>

<body>
   <div id="w">
      <div id="p1">
         some text
      </div>
      <div id="p3">
         some text<br><br>
This cannot be done as in *test.html* because float:left; on the three
divs takes them out of flow and therefore the wrapper is empty.<br><br>
I changed the order of the divs in the html to place the floated divs
first and the static (long one) last.<br><br>
I'm fudging it here with float:left; on the 1st and float:right; on the
3rd and NO float on the 2nd (middle) which gives the wrapper height.<br><br>
It works best with fixed values instead of %ages.<br><br>
I added padding-right value to simulate the required width (apparent)
and position as required.<br><br>
      </div>
      <div id="p2">
A whole lotta text and some and some more.A whole lotta text and some
and some more.A whole lotta text and some and some more.A whole lotta
text and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more. </div>
   </div>
</body></html>

Reply to this Message
David Dorward - 30 Oct 2004 08:12 GMT
> This page shows 3 divs side by side surrounded by a wrapper, but the
> wrapper thinks there's nothing in it, so its collapsed at the top.

http://www.positioniseverything.net/easyclearing.html

Signature

David Dorward       <http://blog.dorward.me.uk/>   <http://dorward.me.uk/>
                    Home is where the ~/.bashrc is

Reply to this Message
Jan Roland Eriksson - 30 Oct 2004 11:35 GMT
>This page shows 3 divs side by side surrounded by a wrapper, but the
>wrapper thinks there's nothing in it, so its collapsed at the top. How
[quoted text clipped - 5 lines]
>#p3{float:left;width:40%;border:solid 1px;}
>#w{border:solid;width:90%; margin:auto;}

 <http://www.css.nu/exp/layer-ex3b.html>
 <http://www.css.nu/exp/layer-ex3c.html>
 <http://www.css.nu/exp/layer-ex3d.html>
 <http://www.css.nu/exp/layer-ex4a.html>

Signature

Rex

Reply to this Message
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage
Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.