# 3 Col Liquid Layout in CSS

**URL:** <https://forum.kirupa.com/t/3-col-liquid-layout-in-css/261165>\
**Category:** web dev\
**Created:** [May 23, 2008, 6:17pm UTC](https://forum.kirupa.com/t/3-col-liquid-layout-in-css/261165 "2008-05-23T18:17:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [May 23, 2008, 6:17pm UTC](https://forum.kirupa.com/t/3-col-liquid-layout-in-css/261165/1 "2008-05-23T18:17:56Z")

</div>

[http://webs.ashlandctc.org/csimmons/sites/actcfoundation/pages/drinkbeer2.htm](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?

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [May 23, 2008, 6:43pm UTC](https://forum.kirupa.com/t/3-col-liquid-layout-in-css/261165/2 "2008-05-23T18:43:47Z")

</div>

> [@dj\_kyron;2330239](#):
>
> What exactly are you trying to make? Are you making a three column liquid layout that has content on all three columns? Or is it 1 column that is basically centered in the screen?

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](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??

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 23, 2008, 7:11pm UTC](https://forum.kirupa.com/t/3-col-liquid-layout-in-css/261165/3 "2008-05-23T19:11:38Z")

</div>

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

😛

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:

```auto

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

```

```auto

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

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [May 25, 2008, 12:51pm UTC](https://forum.kirupa.com/t/3-col-liquid-layout-in-css/261165/4 "2008-05-25T12:51:45Z")

</div>

[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

😛

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:

```auto

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

```

```auto

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. 🙂