Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Issues regarding 100% floats...container not stretching to fit content.

Posted by: mgh-pa Apr 18 2012, 11:55 AM

Alright, this is a locally hosted file of one of my students, so I can only provide the source code. However, basically, this is what seems to be a simple issue, but nothing is working to fix it. The student has a menu container (vertical) that she wants to span automatically according to various screen resolutions and is floated left (she wants the pink bg to span essentially), along with another content container float to the right. Both containers (menu and content) are set to 100% heights, but neither will span to fill the screen, and if content goes beyond the boundaries of the screen resolution in the content container, the item just overlaps, but the container doesn't extend.

Here's the source code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html { height: 100%;}

body { height: 100%;  background-color:#FF9;}

div#main {
    margin: 0 auto;
    width: 900px;
    height:auto;
    background-color:#F9F;
}
div#title { width: 900px; height: 110px; background:#C6F; float: right; font-size:36px; font:"Comic Sans MS", cursive; color:#FFC; }

#bodycontent {width:900px; height:100%; overflow:visible; }
#menu{
    width:150px;
    height:100%;
    background:#F9F;
    color:#639;
    font:"Comic Sans MS", cursive;
    font-size:18px;
    float:left;

}
div#content {
    width: 750px;
    height: auto;
    background:#9FC;
    color:#93F;
    font-family:"Comic Sans MS", cursive;
    font-size:16px;
    float:right;
    overflow:visible;

}
div#home {
    width: 437px;
    height: 64px;
    background:#FF9;
    color:#F6F;
    font-size: 45px;
    position:absolute;
    left: 3px;
    top: 61px;
    font:"Comic Sans MS", cursive; }

div#picture3 {
    width:250px;
    height:334px;
    background:#FFF;
    position:absolute;
    left: 653px;
    top: 559px;
}
div#picture2 {
    width: 450px;
    height: 338px;
    position:absolute;
    top: 576px;
    background:#FFF;
    left: 151px;
}
#picture4 {
    width:325px;
    height: 477px;
    position:absolute;
    top: 952px;
    background:#FFF;
    left: 306px;
}

#menu ul { list-style-type: none; margin: 0px; padding: 0px; display:block; font-size:14px; text-align:center; height:100%; }
#menu li { background-color:#0CF; height: 25px; display:block; margin: 8px 0px 8px 0px; width:150px; text-align:center; font-size:14px; }
#menu li a {color:#909; text-decoration:none; display:block;}

#menu li a:hover{color:#0CF; text-decoration:none; background-color:#FF9;}
#menu li a:active{color:#909; }

p {text-indent:12px;}

</style>

</head>

<body>
<div id="main">
<div id="title"><img src="Images/Header2.jpg" width="900" height="110" alt="header2" /> </div>

<div id="menu">
<ul>Pages:
  <li><a href="Web Project.html">Home Page</a></li>
  <li><a href="Web Project2.html"> About Me</a></li>
  <li><a href="Web Project3.html">Interests/Hobbies</a></li>
  <li><a href="Web Project4.html">Vacations</a></li>
  <br /><br /><br />
  Other Links:
  <li><a href="http://www.facebook.com">Facebook</a></li>
  <li><a href="http://www.promgirl.com">PromGirl</a></li>
</ul>

</div>
<div id="content"><p>My name is ___________________ and I was born on March 19th, 1997. I just turned 15 years old and I am having the time of my life. I love baking and making all different types of desserts. I think it is so much fun and I just have a blast doing it. I have a little sister and her name is ___________________________. She was born on February 2, 2001 and she just turned 11. My mom�s name is ___________________ and my dad�s name is ___________________________. They are the best parents a child could have and I am so thankful for that. I love to travel. It is one of my favorite things to do. I think it is so much fun to go and see how other people live their daily lives and how different it is for some people. I also surprise people when I tell them I drag race. I am such a girly girl but when it comes to racing I can get down and dirty. I love the feeling of winning and watching everyone�s faces when I go down the track. You can tell they are thinking � oh my god, that�s a girl in there!!� . It�s so much fun!</p>

<p>I just stared High School this year and I love it. It is so much better than middle school. You get so much more freedom and more respect. The one class that I really like is German. I like learning a different language because it is different and I love walking up to people and start talking to them in German because they have no idea what I am saying:) I also like taking Intro To Business. It teaches what to look forward to in life and gives me a heads up of what the world is going to be like when I get older and don�t live with my parents anymore. We started learning about law and it teaches me a lot and shows me what to look out for in life.</p>

<img src="Images/Oasis-of-the-Seas-2.jpg"  />
<img src="Images/Banana-Daquires.jpg"  alt="Banana" />
<img src="Images/German-Trip.jpg" alt="german" />

</div>


</div>

</body>
</html>

Any ideas on how to get the pink #menu to stretch the whole way down regardless of resolution along with the #content to do the same AND automatically stretch vertically to accommodate additional items as they're placed? Thanks!

Posted by: Darin McGrew Apr 18 2012, 02:30 PM

This may help:
http://css-discuss.incutio.com/wiki/Any_Column_Longest

Posted by: mgh-pa Apr 19 2012, 06:57 AM

QUOTE(Darin McGrew @ Apr 18 2012, 03:30 PM)

This may help:
http://css-discuss.incutio.com/wiki/Any_Column_Longest

That worked, thanks!