CSS Layout Problem! [Archive]

onthespot

08-19-2007, 01:44 AM

Hello all!

Ok, my problem is that on the css layout, i have one frame that is supposed to have two inside. Basically, the one frame is supposed to have the navbar on the left and the main on the right of this navbar.

Here is the code:

#mainbody {
width: 1000px;
}

#navbar {
width:200px;
background: white;
float: left;
border-right: black;
border-right-width: 2px;
}

#main {
width:800px;
background: white;
text-align: left;
}

Here, the "mainbody", is supposed to house both the "navbar" and the "main". As you can see, the desired effect is that the navbar will stay on the left, and the main will then take up the remaining space on the right.

Here is the code to enable this:

<div id="mainbody">
<div id="navbar">
</div>
<div id="main"></div>
</div>

However, it just will not do what I want it to. I've tried lots of things including, display:inline, align to the center, left and right. It still won't work.

Perhaps it's a simple error I have made. That's why I am asking you guys!
Please help!
Thanks. :)

abduraooft

08-19-2007, 09:20 AM

put float:left; to ur navbar and then put margin-left:200px; for the main. Have a look at 2c-hf-fixed (http://bonrouge.com/2c-hf-fixed.php) if you are trying to build something like this!

coothead

08-19-2007, 09:26 AM

Hi there onthespot,

and a warm welcome to these forums. ;)

I would suggest that you use a background-image for the mainbody div - (see attachment) - instead of a border for the nav div.

Try it with this coding...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#mainbody {
width: 1000px;
background-image:url(mainbodyBg.gif);
}
#mainbody:after {
content:'';
display:block;
clear:both;
}
#navbar {
width:200px;
background-color:#fff;
float:left;
}
#main {
width:798px;
float:left;
background-color:#fff;
margin-left:2px;
}
#main p {
margin-left:10px;
margin-right:10px;
text-align:justify;
}
</style>

</head>
<body>

<div id="mainbody">

<div id="navbar">
<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
</ul>
</div>

<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
<p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
</p>
</div>

</div>

</body>
</html>
coothead

onthespot

08-19-2007, 01:13 PM

Hello and thankyou for the replies. I tried them both and couldn't get the first reply to work so I went with coothead's. The problem is that, now I have lined these up (thankyou), I am missing the bottom of the page. I have a bar at the bottom which is there to finish it off. But this has now gone missing. Any ideas?

coothead

08-19-2007, 03:52 PM

Hi there onthespot,
I have a bar at the bottom which is there to finish it off. But this has now gone missing. Any ideas?
A link to your problematic page or the full code would help us provide a solution. ;)

coothead

onthespot

08-19-2007, 07:28 PM

Hey coothead, thanks for the reply again. I knew I needed to leave you something to look at! I was in a rush to get to football though. Sorry!

Anyways, this is the HTML on my page,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css"
href="page layout.css" />
</head>

<body>
<div id="overall">
<div id="logo space"><img src="sitelogo.jpg"></div>
<div id="login area"><img src="logintempimage.jpg"></div>
<div id="mainbody">

<div id="navbar">
<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
</ul>
</div>

<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
<p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.</p>
</div>

</div>
</div>
<div id="credits"></div>
</body>
</html>

And, after popular request, the CSS:-

body {
background: black;
margin: 25px;
height: 100%;
}

#overall {
border: solid black;
border-width:2px;
width: 1000px;
margin: auto;
}

#logo space {
height:100px;
}

#login area {
height: 50px;
background: white;
border: solid black;
border-width:1px;
}

#mainbody {
width: 1000px;
background-image:url(mainbodyBg.gif);
}
#mainbody:after {
content:'';
display:block;
clear:both;
}
#navbar {
width:200px;
background-color:#fff;
float:left;
}
#main {
width:798px;
float:left;
background-color:#fff;
margin-left:2px;
}
#main p {
margin-left:10px;
margin-right:10px;
text-align:justify;
}

#credits {
height: 20px;
background: white;
text-align:center;
}

The problem is that the "credits" div is supposed to be at the very bottom of the page. However, its just not there, or its moving up to be alongside the "navbar" and in parallel with the "main" div.

Any ideas?

Kinda of annoying, not great at CSS though. If you could help, would be grately appreciated. :)

ahallicks

08-19-2007, 08:14 PM

Try putting clear:both; inside #credits CSS to clear your floats.

onthespot

08-19-2007, 08:32 PM

ahallicks, superb! That works! Its all working now, thanks to everyone that has helped me on this, finally got it working! Thanks

coothead

08-19-2007, 09:15 PM

Hi there onthespot,

I have looked at your code and made a few changes - (mainly to the css)...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css"href="page layout.css">
<style type="text/css">
body {
background-color:#669;
margin:25px;
}
#overall {
width:1000px;
background-color:#fff;
border:2px solid #000;
margin:auto;
}
#logo_space {
height:100px;
}
#login_area {
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
#mainbody {
background-image:url(mainbodyBg.gif);
}
#navbar {
width:200px;
float:left;
}
#navbar ul {
margin-top:10px;
}
#main {
width:798px;
float:left;
margin-left:2px;
}
#main p {
margin:10px 20px;
text-align:justify;
}
.clear {
clear:both;
font-size:0;
}
#credits {
height:20px;
border-top:1px solid #000;
text-align:center;
}
</style>

</head>
<body>

<div id="overall">

<div id="logo_space"><img src="sitelogo.jpg" alt="sitelogo"/></div>
<div id="login_area"><img src="logintempimage.jpg" alt="logintempimage"/></div>

<div id="mainbody">

<div id="navbar">
<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
</ul>
</div>

<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
<p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.</p>
</div>

<div id="clear"> </div>

</div>

<div id="credits">credits</div>

</div>

</body>
</html>
I changed the background-color only so that you may better see the content effects. ;)

coothead

jkmcgee

08-19-2007, 10:38 PM

Hello,
I am also trying to emulate a similar output, but have more problems.
I am creating a div to be the contents pane and a div to be the navigation pane.

I have a header div, with an image I want to remain stuck at the top of the page.

One problem is that the content div seems to be starting to the left of the header div.

Then the nav pane seems to be starting under the contents pane.

Kind of hard to explain, so I'm attaching my html and css file any help is welcome and appreciated.