Solved

CSS error with coloums

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

726 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