3 Col Liquid Layout in CSS

programming web dev
1

http://webs.ashlandctc.org/csimmons/sites/actcfoundation/pages/drinkbeer2.htm

I almost have it, but no matter what %'s I assign, the right col ignores me and is difficult.
Any suggestions?

2

The only content will go in that center div.
Basically my boss wants me to turn this: http://webs.ashlandctc.org/csimmons/sites/actcfoundation/pages/index.htm
into CSS…
It seems like the more I look at it, the harder it gets and less attainable it seems. I’ve read about 50 tutorials on 3 col layouts too…

Why is CSS supposedly better than tables again??

3

you don’t need a 3 column layout to accomplish this.

One main div, centered, with a big background image applied to the page body to complete the background image.

That is all

:stuck_out_tongue:

You need to abandon the “table” way of thinking in terms of layout images,
you don’t need containers to add images, you just add them to the background of a div, or the background of the page.

For example, i would make your page like this:


<body>
<div class="container">
<div class="header"</div>
<div class="content"></div>
</div>
</body>



body {
margin: 0;
padding: 0;
background: url(images/bg.jpg) no-repeat **center** top; [COLOR=RoyalBlue]/* combine your left and right images into one large one, center makes the image appear in the middle of the page. */[/COLOR]
}

.container {
width: 1000px; [COLOR=RoyalBlue]/* Adjust this, you probably will not be able to use 80% */[/COLOR]
margin: 0 auto; [COLOR=RoyalBlue]/* Centers the container div in the page */[/COLOR]
}

.container .header {
height: 200px; [COLOR=RoyalBlue]/* adjust this */[/COLOR]
background: url(images/header.jpg) no-repeat; [COLOR=RoyalBlue]/* remove header from content_div.jpg, make it its own image */[/COLOR]
}

.container .content {
background: url(images/content_div.jpg) no-repeat top; [COLOR=RoyalBlue]/* content area image, aligned to the top */[/COLOR]
}

Hope that helps

4

[QUOTE=fasterthanlight™;2330261]you don’t need a 3 column layout to accomplish this.

One main div, centered, with a big background image applied to the page body to complete the background image.

That is all

:stuck_out_tongue:

You need to abandon the “table” way of thinking in terms of layout images,
you don’t need containers to add images, you just add them to the background of a div, or the background of the page.

For example, i would make your page like this:


<body>
<div class="container">
<div class="header"</div>
<div class="content"></div>
</div>
</body>



body {
margin: 0;
padding: 0;
background: url(images/bg.jpg) no-repeat **center** top; [COLOR=RoyalBlue]/* combine your left and right images into one large one, center makes the image appear in the middle of the page. */[/COLOR]
}

.container {
width: 1000px; [COLOR=RoyalBlue]/* Adjust this, you probably will not be able to use 80% */[/COLOR]
margin: 0 auto; [COLOR=RoyalBlue]/* Centers the container div in the page */[/COLOR]
}

.container .header {
height: 200px; [COLOR=RoyalBlue]/* adjust this */[/COLOR]
background: url(images/header.jpg) no-repeat; [COLOR=RoyalBlue]/* remove header from content_div.jpg, make it its own image */[/COLOR]
}

.container .content {
background: url(images/content_div.jpg) no-repeat top; [COLOR=RoyalBlue]/* content area image, aligned to the top */[/COLOR]
}

Hope that helps[/QUOTE]

I’ll try it Tuesday when I go back to work. Thanks for the mini-tut on abandoning Table thinking. I needed that. :slight_smile: