5 Replies - 8090 Views - Last Post: 27 October 2011 - 05:22 PM

#1 chrismouser  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-October 11

CSS layout problems

Posted 27 October 2011 - 04:48 PM

Attached ImageI've been given a relatively easy assignment in my Web development class and I'm having a problem with my layout and I cannot figure out why. Here is the code for my index page

<!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" lang="en" xml:lang="en">

<head>
  <title>Javajam Coffee House</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="javajam.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="container">
  
   <div id="logo">
    <img src="javalogo.gif" width="100%" height="150" alt="JavaJam Coffee House" />
   </div>
   
    <div id="nav">
	  <ul>
	    <li><a href="index.html">Home</a></li>
	    <li><a href="menu.html">Menu</a></li>
	    <li><a href="music.html">Music</a></li>
	    <li><a href="jobs.html">Jobs</a></li>
      </ul>
    </div>
	  
      <div id="content">
	    <img src="windingroad.jpg" class="floatright" height="220" width="460" hspace="20" alt="Winding Road" />
	    <h3>Follow the winding road to JavaJam...</h3>
		
            <ul>
              <li>Specialty Coffee and Tea</li>
              <li>Bagels, Muffins and Organic Snacks</li>
              <li>Music and Poetry Readings</li>
              <li>Open Mic Night</li>
            </ul>
		  
        <h4>12312 Main Street<br />
         Mountain Home, CA 93923<br />
         1-888-555-5555
		</h4>
		 
		  <br />
      </div>
	  
    <div id="footer">
      Copyright &copy; 2011 JavaJam Coffee House<br />
      <a href="chris@mouser.com">chris@mouser.com</a>
    </div>
	
  </div>
  
</body>
</html>


The website uses an external style sheet as well :

body { background-color: #ffffcc;
      color: #330000;
	  font-family: Verdana, Arial, sans-serif;
	  background-image: url(background.gif); 
}
h1 {   background-color: #ccaa66;
      color: #000000;
	  text-align: center;
}
h2 {   background-color: #ccaa66;
      font-size: 1.2em;
	  padding-left: 10px;
	  padding-bottom: 5px;
}
img {  border: 0;
}
#nav { text-align: center; 
      background-color: #f1e8b0;
      font-size: 1em;
	  float: left;
	  width: 150px;
	  height: 100%;
	  overflow: auto;
	  padding-top: 10px;
	  overflow: auto;
}
#footer { background-color: #ccaa66;
       color: #000000;
	   border-top: 2px double #000000;
	   padding-top: 20px;
	   padding-bottom: 20px;
       font-size: .60em;
	   font-style: italic;
	   text-align: center;
}
#container { 
       margin-left: auto;
       background-color: #e8d882;
	   color: #000000;
	   border: 2px double #000000;
	   min-width: 700px;
       margin-right: auto;
	   width: 80%;
}
#logo { background-color: #ccaa66;
       color: #000000;
	   text-align: center;
	   margin: 0;
	   border-bottom: 2px double #000000;
}
#content { 
       margin-left: 150px;
	   background-color: #e8d882;
	   color: #000000;
	   padding: 10px 20px;
	   overflow: auto;
}
#nav a { text-decoration: none;
       margin: 30px;
	   text-align: center;
	   display: block;
}
#nav  a:hover {
       color: #ff0000;
}
#nav ul {
       list-style-type: none;
}
.floatright { 
       padding-left: 20px;
	   float: right;
}
.details { padding-left: 20%;
       padding-right: 20%;
}



The problem here is (if you've opened the code in a broswer) the background color of the navigation column does not go all the way down to the bottom of the column. I can't figure out why this is happening. Some help here please? I've provided a screenshot of the problem below

Is This A Good Question/Topic? 0
  • +

Replies To: CSS layout problems

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: CSS layout problems

Posted 27 October 2011 - 04:52 PM

It's because since you're floating the navigation and the content, they'll take the height of the longest one. You should notice that the navigation is the same height as the content. I'm not sure what the exact fix is, but set the parent container of #nav to have the position relative and the #nav to have a position absolute, that may fix the issue.
Was This Post Helpful? 0
  • +
  • -

#3 chrismouser  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-October 11

Re: CSS layout problems

Posted 27 October 2011 - 05:17 PM

so what would be the parent container?
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: CSS layout problems

Posted 27 October 2011 - 05:18 PM

Hmm, I thought that you could figure that out for yourself. The #nav is inside which div? The #container one :) That's where you should apply that styling to.
Was This Post Helpful? 0
  • +
  • -

#5 chrismouser  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-October 11

Re: CSS layout problems

Posted 27 October 2011 - 05:20 PM

The only reason i asked is because I tried that and it didnt work
Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: CSS layout problems

Posted 27 October 2011 - 05:22 PM

That's alright, I'm sorry, I meant no offense by that.

I tried Googling for an answer and found http://stackoverflow...n-ie-what-to-do as the top result. My search terms were, "how to get a floated div to stretch total height"
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1