Solved

3 column fluid layout

Posted on 2011-09-30
8
231 Views
Last Modified: 2012-05-12
I'm just wondering, is there an easy way to create a 3 column layout using CSS where the left and right column are fixed widths, but the center column stretches to fill the available space?

I know I could do it using javascript by getting the browser width and deducting the width of the left and right columns, then setting the center column to the remaining width.

Is there a way to do it without javascript?
0
Comment
Question by:SheppardDigital
  • 5
  • 3
8 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36891715
0
 

Author Comment

by:SheppardDigital
ID: 36891867
Kind of like that, my only problem is I've also got a 100% header above the three columns, so it makes it difficult to add the left and right padding to the body.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36891874
Can you show us an image of exactly what your looking for?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:SheppardDigital
ID: 36891924
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36891958
Are you going to wrap everything in a container of some sort? Something with a fixed width?
0
 

Author Comment

by:SheppardDigital
ID: 36891973
No there won't be a container with a fixed width because I want the header to fill the full width of the browser window, as well as the three columns.

I wonder if it might be easier to use javascript?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36892039
Not necessarily. We may just be able to modify the CSS layout I sent you. Give me a few.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36892483
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question