Solved

3 column fluid layout

Posted on 2011-09-30
8
234 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

Technology Partners: 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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

695 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