Solved

CSS error with coloums

Posted on 2013-01-31
2
477 Views
Last Modified: 2013-02-02
Hi having a nightmare with css, I am used to the old tables but want to do it in css

if the code below I want the footer to line up with the columns above. and the pink white and grey columns to grow together. how that make sense. just typed a load of rubbish to see if the grow.

Here is what I have so far:

<!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">
body{
      background-color: #09F;
      }
#Header {
      background-color: #039;
      height: 200px;
      width: 960px;
      position: relative;
      margin-left: auto;
      margin-right: auto;
}

#page {
      background-color: #FFC;
      height: auto;
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: auto;
      margin-top: 0px;
      margin-bottom: 0px;
}
#LeftNav {
      background-color: #C9F;
      height: 100%;
      width: 200px;
      position: relative;
      float: left;
}

#Main {
      background-color: #FFF;
      width: 560px;
      height: 100%;
      position: relative;
      margin-top: 0px;
      float: left;
}

#RightNav {
      background-color: #666;
      position: relative;
      width: 200px;
      height: 100%;
      float: right;
}

#Footer {
      background-color: #0FF;
      height: auto;
      width: 960px;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      margin-top: 0px;
      margin-bottom: 0px;
      padding: 0px;
}
</style>
</head>

<body>
<div id="Header">
</div>
<div id="page">

<div id="LeftNav">

  <p>mjgdhhgdh
    jgdhdhgdh
    khdfjghfdgjh
    jghdhdh </p>
  <p>gjhfghfdhd</p>
  <p>jgdhjgdgdg</p>
  <p>lihyoiutiiuti</p>
  <p>yiruytrtuyruyt</p>
  <p>iutitutitiy</p>
  <p>jhfdfghfhg</p>
  <p>jgfdghdhdhg</p>
</div>
<div id="Main">
  <p>gfdhdfh</p>
  <p>gfdhdfhgfd</p>
  <p>gfhdfh</p>
  <p>gfdhgfdhgfd</p>
  <p>gfdhgfdhgfdhgf</p>
  <p>gfdhgfdhgfd</p>
  <p>gfdhdfhgfdh</p>
  <p>gfdhgfdhgfdh</p>
  <p>gfdhdhgfdhgf</p>
  <p>gfdhgfdhgfdh</p>
  <p>gfdhgf  </p>
  <p>gfdhgfdhfg</p>


</div>
<div id="RightNav">
  <p>yuttrurytuytru</p>
  <p>gfdhdfhfhf</p>
  <p>gfdhdfhgfhgf</p>
  <p>gfdhfdhgf</p>
  <p>gfdhfdhgdhgfd</p>
  <p>gfdhfdhgfdh</p>
  <p>gfdhdfhgfdh</p>
  <p>gfdhfdhgfdh</p>
  <p>gfdhdhgfdh</p>
  <p>gfhd</p>




</div>
</div>
<div id="Footer">
  <p>djgfdgfhjfgjgf</p>
</div>
</body>
</html>
0
Comment
Question by:taz8020
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 38841708
Check out the css from one of the grid systems like blueprint.css  or 960.gs they will  make your life easier although you were on the right track.      I have updated sample code below working with blueprint.css and portions of your custom css and added min hight 100% and works in chrome http://jsbin.com/alajay/4/edit
<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JS Bin</title>
  <link href="http://www.blueprintcss.org/blueprint/screen.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="container">
  <div id="Header" class="span-24 last"> </div>
  <div id="page" class="span-24 last">
    <div id="LeftNav" class="span-5">
      <p>Left<br>
        jgdhdhgdh
        khdfjghfdgjh
        jghdhdh </p>
      <p>gjhfghfdhd</p>
      <p>jgdhjgdgdg</p>
      <p>lihyoiutiiuti</p>
      <p>yiruytrtuyruyt</p>
      <p>iutitutitiy</p>
      <p>jhfdfghfhg</p>
      <p>jgfdghdhdhg</p>
    </div>
    <div id="Main" class="span-14">
      <p>Main</p>
      <p>gfdhdfhgfd</p>
      <p>gfhdfh</p>
      <p>gfdhgfdhgfd</p>
      <p>gfdhgfdhgfdhgf</p>
      <p>gfdhgfdhgfd</p>
      <p>gfdhdfhgfdh</p>
      <p>gfdhgfdhgfdh</p>
      <p>gfdhdhgfdhgf</p>
      <p>gfdhgfdhgfdh</p>
      <p>gfdhgf </p>
      <p>gfdhgfdhfg</p>
    </div>
    <div id="RightNav" class="span-5 last">
      <p>yuttrurytuytru</p>
      <p>gfdhdfhfhf</p>
      <p>gfdhdfhgfhgf</p>
      <p>gfdhfdhgf</p>
      <p>gfdhfdhgdhgfd</p>
      <p>gfdhfdhgfdh</p>
      <p>gfdhdfhgfdh</p>
      <p>gfdhfdhgfdh</p>
      <p>gfdhdhgfdh</p>
      <p>gfhd</p>
    </div>
  </div>
  <div id="Footer" class="span-24">
    <p>djgfdgfhjfgjgf</p>
  </div>
</div>
</body>
</html>

Open in new window


css
body{
      background-color: #09F;
 min-height: 100%;
      }
#container{
 background-color:red;
 width:970px;
 margin-right:auto;
  margin-left:auto;
  
  
}
#Header {
      background-color: #039;
    
}

#page {
      background-color: #FFC;
 
}
#LeftNav {
      background-color: #C9F;
    min-height: 100%;
}

#Main {
      background-color: #FFF;
  min-height: 100%;

}

#RightNav {
      background-color: #666;
  min-height: 100%;
  
}

#Footer {
      background-color: #0FF;
   
}

Open in new window

0
 
LVL 3

Author Closing Comment

by:taz8020
ID: 38846474
Thank you had to change a few things but really helped.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now