Creating Two column webpage with CSS

SMC

09-14-2007, 11:03 PM

Hello everyone.

Now I can probably make this layout with Tables much easier but it would take forever to load and be unclean code, so, here we go.

I'm having difficulty making a very simple layout. The problem is I need it to be kind of like a frame, but it is going to be a wrapper style. Here is an example image:

http://img526.imageshack.us/img526/4102/examplelk1.jpg
http://img526.imageshack.us/img526/4102/examplelk1.jpg

Now when I try this all sorts of funky things happen. Anywhere from a gap opening above the header, to the left menu not stretching down. I could use any tips you guys (and girls) can offer on how to make this, I really think I'm just making it much harder than it has to be.

Thanks!!!

PS: I've posted the CSS so you can see where my head is at:

body {

background-color: #000000;
Color: #FFFFFF;
Font-family: Arial, Helvetica, sans-serif;
Font-size: 14px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

}

.header-left {

background-image: url( '../images/header_left.jpg' );
background-repeat: no-repeat;
width: 600px;
height: 155px;
position: relative;
float: left;

}

.header-repeat {

background-image: url( '../images/repeat.jpg' );
background-repeat: repeat-x;
width: 100%;
height: 155px;
float: left;

}

.left-nav {

background-image: url( '../images/nav/wood_repeat.jpg' );
background-repeat: repeat-y;
width: 200px;
height: 100%;
float: left;
margin: 0px;
margin-right: 20px;

}

.bottom-nav {

background-image: url( '../images/nav/bottom_nav.jpg' );
margin: 0px;
width: 200px;
height: 25px;

}

.nav-content {

margin: 10px;

}

.content {

margin: 20px;

}

/* AD Divs */

.a125x125 {

width: 125px;
height: 125px;
overflow: hidden;

}

/* TEXT CSS */

.nav-section {

font-weight: bold;
font-size: 14px;
Color: #FFFFFF;

}

.nav-links {

line-height: 20px;
font-size: 12px;
margin-top: 5px;
margin-left: 30px;

}

.nav-link:link, .nav-link:visited {

Color: #FFFFFF;
font-weight: normal;
text-decoration: none;

}

.nav-link:hover {

Color: #FFFFFF;
font-weight: normal;
text-decoration: underline;

}

.align-center {

width: 96%;
text-align: center;
margin: auto;
padding: 5px;

}

PappaJohn

09-14-2007, 11:52 PM

This (http://bonrouge.com/3c-hf-fluid.php) sounds like what you're looking for

dudeson

09-14-2007, 11:56 PM

they this, all you will have to do it repeat a background in the container div that matches the left, middle and right to make it look like they stretch the height of the middle div and ur all set.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body { margin:0;}

#container { width:100%; }

#header { width:100%; height:100px; background:#ccc; }

#content { background:red; float:left; margin:0; }
p { margin:10px 160px 10px 160px; }

#right { width:150px; height:300px; float:right; background:#999; }

#left { width:150px; height:300px; background:#999; float:left; }

#footer { width:100%; height:100px; background:#333; clear:both; }
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="right"></div>
<div id="left"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nibh arcu, tempus ac, rhoncus id, laoreet at, libero. Fusce mi nulla, pharetra a, euismod eget, lacinia quis, nunc. Nullam adipiscing. Donec convallis pede ac dolor. Nulla facilisi. Nunc odio dui, dignissim sed, rhoncus ac, pulvinar et, purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat lacinia mi. Aenean vestibulum aliquet massa. Mauris eget lacus.</p>

<p>Aliquam varius dolor at lorem. Duis interdum, orci gravida ullamcorper viverra, massa purus tristique ligula, sit amet blandit turpis ante vitae lacus. Nullam tincidunt orci venenatis nunc. Donec a sapien. Quisque a nulla ut ante molestie pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis sapien ac lorem. Maecenas justo. Ut id urna in metus nonummy nonummy. Morbi aliquet orci ut dolor. Ut sapien augue, iaculis id, convallis vel, interdum sit amet, felis. Duis elementum. Pellentesque tellus odio, elementum in, rhoncus ac, mollis ac, nisi. Aliquam suscipit orci ut odio.</p>

<p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque ipsum mi, vulputate ut, malesuada quis, blandit quis, justo. Maecenas quis felis at purus ultricies ornare. In hac habitasse platea dictumst. Nulla tincidunt sagittis nisl. Integer fermentum mi vel velit. Sed dapibus ipsum et lorem. Vivamus posuere massa vel nulla. Suspendisse eget metus sed ante mattis varius.</p>
<div id="footer"></div>
</div>
</BODY>
</HTML>

jlhaslip

09-15-2007, 02:34 AM

http://jlhaslip.trap17.com/samples/templates/framed/

will this work?

effpeetee

09-16-2007, 01:20 PM

You may find some helpful sites here.
See my signature.

Frank

SMC

09-16-2007, 05:35 PM

Thank you all for your input! I've managed to find the way