The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> Issues regarding 100% floats...container not stretching to fit content.
post Apr 18 2012, 11:55 AM
Post #1

Group: Members
Posts: 2
Joined: 18-April 12
Member No.: 16,939

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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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;
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; }
    font:"Comic Sans MS", cursive;
div#content {
    width: 750px;
    height: auto;
    font-family:"Comic Sans MS", cursive;

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

div#picture3 {
    left: 653px;
    top: 559px;
div#picture2 {
    width: 450px;
    height: 338px;
    top: 576px;
    left: 151px;
#picture4 {
    height: 477px;
    top: 952px;
    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;}



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

<div id="menu">
  <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="">Facebook</a></li>
  <li><a href="">PromGirl</a></li>

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

<!--End of Content -->

</div><!--End of Main -->


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!

This post has been edited by mgh-pa: Apr 18 2012, 11:57 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 18 2012, 02:30 PM
Post #2

WDG Member

Group: Root Admin
Posts: 8,270
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3

This may help:
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
post Apr 19 2012, 06:57 AM
Post #3

Group: Members
Posts: 2
Joined: 18-April 12
Member No.: 16,939

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

That worked, thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 25th May 2018 - 04:13 AM