Solved

3 column fluid layout

Posted on 2011-09-30
8
232 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

756 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