3 fixed Columns (header and footer) using DIVs, NO Absolute DIVs, IE friendly, ALL columns stretch e

Posted by Phillip Schein on Stack Overflow See other posts from Stack Overflow or by Phillip Schein
Published on 2010-06-06T17:53:45Z Indexed on 2010/06/06 18:12 UTC
Read the original article Hit count: 195

Filed under:

css-layout

|

div-layouts

|

semantic-markup

|

xhtml-transitional

Left to right, Col1 id 560px wide with 10 px padding, middle column, 250px wide with 5px padding and Col3 (siderbar) is 200px wide with 3px padding. Background coloR, no matter text length in any column should stretch vertically equal. No javascript (jQuery workarounds) to make it work. It needs to be pure Semantic Markup with CSS. Each Column should have a nested column of color were content will go. Column 1 should be SEO prominant which means the highest nested column for Google and other Search Engines to crawl. I have used 'The Holy Grail" layout, articles at "A List Apart" and these solution are so convoluted that they push the main columns left and than the nested columns push them with padding back right. This is crazy! I try to adjust these examples, but they're not editable by just adjusting a width in the CSS or the padding, etc. Can you please help me?

© Stack Overflow or respective owner

Related posts about css-layout

CSS layout that fills available space

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall. I'd like to do everything purely with CSS (no tables to much things up, and no javascript dynamically resizing things) I'd like to have: A heading with a fixed height A footer with a fixed height Left sidebar with a… >>> More
CSS layout with 2 columns, taking up all width of browser, where left column can collapse

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now… >>> More
Tricky CSS Layout

as seen on Stack Overflow - Search for 'Stack Overflow'
So I am making a website with quite a problematic layout. There are four corner images TL, TR, BL and BR indicated by black blocks. The dark orange area is the main content (to a width of 960px), with the outside area denoted by the green arrow as the browser window. See diagram: The top image… >>> More
Advanced CSS layout problem

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code: <html> <body> <div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table"> <div style="display:… >>> More
Relative width for a CSS layout, fixed and fluid mix

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, I am trying to make a chatroom layout like the following: Now my problem is that I am not sure how to have the container box occupy the whole width and height (with valid doctype) and then make the center div grow if the window grows keeping the rest constant. i am well aware of js/css… >>> More

Related posts about div-layouts

Having issues with div layouts

as seen on Stack Overflow - Search for 'Stack Overflow'
new here and I'm crossing fingers for help. I'm working on http://www.catgriz.com On the frontpage I have a slideshow that stacks all of the information on top of itself when you initially visit the page. But after a simple browser refresh, it displays correctly. I was hoping someone could look… >>> More
Css trick to conjoin divs.

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there a way we could conjoin three divs together? Hello <div class="mainContainer"> <div class="LeftDiv"></div> <div class="CenterDiv"> <input id="txtTest" type="text"/> </div> <div class="RightDiv"></div> </div> World… >>> More
CSS issue with elements spanning columns

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi folks. Overview: I'm trying to create a relatively simple page layout detailed below and running into problems no matter how I try to approach it. Concept: - A standard-size-block layout. I'll quote unit widths: each content block is 240px square with 5px of margin around it. - A left column… >>> More
Simple CSS Scale-Nine Layout

as seen on Stack Overflow - Search for 'Stack Overflow'
After all these years, I still haven't learned CSS layout, so bear with me. I'm trying to create a container with rounded corners that I generated in Photoshop. The background of the container is white, so I have eight images: top-left-corner, top, top-right-corner, right, bottom-right-corner, bottom… >>> More
CSS layout that fills available space

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall. I'd like to do everything purely with CSS (no tables to much things up, and no javascript dynamically resizing things) I'd like to have: A heading with a fixed height A footer with a fixed height Left sidebar with a… >>> More