Solved

CSS error with coloums

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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
c# LinkButton OnClientClick 2 34
Authentication of Web Services 3 54
Angular JS Route 3 54
Entity Framework 7 33
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…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
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…

863 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

18 Experts available now in Live!

Get 1:1 Help Now