Solved

CSS error with coloums

Posted on 2013-01-31
2
465 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
Comment Utility
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
Comment Utility
Thank you had to change a few things but really helped.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

771 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

11 Experts available now in Live!

Get 1:1 Help Now