Basic CSS problem with two column layout....

Static_uk

09-15-2011, 03:43 PM

OK guys here we go, I know this is a very basic problem but ive been coding for about two weeks now, having had no previous experience. I thought I was doing well with the css basics until I hit this problem.

All I want is for the left hand container to stretch to the bottom of the page (so that I can fit several other div's inside it) and then for the content column to sit to the left of it. I did have the content div next to it, until I put the container in and now cant fix it!

Ive looked through websites and books i've bought and I have all the basics that they have in, so I can only believe that its something to do with the container or the extras ive put in!

I'm not sure how much of the code you need so I'll just post it all, and please dont laugh at the content as I'm using a topic that I love to keep me interested!

body {
margin: 0px;
padding: 0px;
font-size: 11pt;
font-family: Verdana, Calibri, Arial, sans-serif;
background-color: #ffffff;
color: #222222;
}

h1 {
font-size: 18pt;
font-family: Times New Roman, Verdana, sans-serif;
background-color: #cccccc;
padding: 0px;
margin: 0px;
}

h2 {
font-size: 12pt;
font-family: Verdana, Calibri, Arial, sans-serif;
color: #444444;
}

a:link, a:visited {
color: #ffffff;
text-decoration: none;
}

#title {
height: 120px;
background-color: #000000;
padding: 0px;
margin: 0px;
}

#nav {
float: left;
background-color: #000000;
width: 100%;
border-top: 1px solid white;
border-bottom: 1px solid white;
padding: 0px;
margin: 0px;
}

#nav ul {
list-style: none;
display: inline;
color: #ffffff;
padding: 0px;
}

#nav li {
display: inline;
padding: 6px 10px 6px 10px;
margin: 0px;
border-right: 1px solid white;
line-height: 30px;
}

#sidebar-container {
float: left;
width: 160px;
margin: 0px;
padding: 0px;
display: inline;
height: 100%;
}

#sidebar {
padding: 0px;
margin: 0px;
width: 160px;
background-color: #000000;
color: #ffffff;
}

#sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#sidebar li {
padding: 10px;
}

#content {
float: left;
padding: 10px;
margin: 0px;
displai: inline;
height:100%;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:land="en">
<head>
<title>Index Page</title>
<link rel="stylesheet" type="text/css" href="Layout.css" />
</head>

<body>
<div id="title">
</div>
<div id="nav">
<ul>
<li><a href="/Warhammer40,000Index.html">Warhammer 40,000</a>
<li><a href="/WarhammerFantasyIndex.html">Warhammer Fantasy</a>
<li><a href="/MalifauxIndex.html">Malifaux</a>
<li><a href="/WarmachineIndex.html">Warmachine</a>
<li><a href="/FlamesofWar.html">Flames of War</a>
</ul>
</div>

<h1><center>Hyper-active Gamer<br />
Established 2003</center></h1>

<div id="sidebar-container">
<div id="sidebar">
<ul>
<li>Selection 1
<li>Selection 2
<li>Selection 3
<li Selection 4
</ul>
</div>
</div>
<div id="content">
<h2> Title for main</h2>
<p> Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here.Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write here</p>
</div>
</body>
</html>

Sorry for how basic this is but ive spent a few hours on it now and it's driving me crazy! Anyone who could show me the fix and explain why I failed would be much appreciated.

sunfighter

09-15-2011, 06:37 PM

If you google two column layout you will find all kinds of templates for different situations.
In your code you should be aware that <li> needs a closing tag </li> and that <center> is no longer valid. I added text-align: center; to your H1 and H2 definitions.

Your left side nav is inside of two div's. You should combine them. What I did was to rename some divs and made a contain div for everything, much like the body tag. Then placed two div inside it. Below is just the main part of the page with the css definitions to show what I did. I made a page width in the main div and gave widths to the divs inside of it.

Hope this helps, but be aware there are are better ways to handle widths and heights. What I used places limits on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-size: 11pt;
font-family: Verdana, Calibri, Arial, sans-serif;
background-color: #ffffff;
color: #222222;
}
h1 {
font-size: 18pt;
font-family: Times New Roman, Verdana, sans-serif;
text-align: center;
background-color: #cccccc;
padding: 0px;
margin: 0px;
}
h2 {
font-size: 12pt;
font-family: Verdana, Calibri, Arial, sans-serif;
text-align: center;
color: #444444;
}
#container {
width: 800px;
height: 400px;
}
#sidebar {
float: left;
width: 160px;
height: 100%;
background-color: #000000;
color: #ffffff;
}
#main {
width: 620px;
float: right;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul>
<li>Selection 1</li>
<li>Selection 2</li>
<li>Selection 3</li>
<li>Selection 4</li>
</ul>
</div>

<div id="main">
<h2> Title for main</h2>
<p> Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here.Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write here</p>
</div>
</div>
</body>
</html>

teedoff

09-15-2011, 06:53 PM

You should also know that a div's natural behavior is to stretch vertically to accommodate whatever content is placed inside it. Of course if you assign a hard height rule then that's changing the natural behavior.

Static_uk

09-15-2011, 07:52 PM

Great, so basically i need to place it in a container and then ensure i give ach div inside an actual value! Brilliant, I can keep moving foraward.

Also I have looked at loads of templates but I was seeing if i could mix fluid and fixed values in this two column format. For now I'll keep it simple though :P

Cheers