Solved

3 column fluid layout

Posted on 2011-09-30
8
229 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

803 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