Solved

CSS error with coloums

Posted on 2013-01-31
2
480 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

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

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

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

838 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