CODEWITHSUNDEEP
csslayoutfluid-layout
andrewgcross
andrewgcross

Reputation: 263

CSS 3-column layout with fluid left column, centered and fixed middle column, and fixed right column

I'm having a hell of a time wrapping my head around this one. What I'm trying to do here is create a straight-forward 3-column layout with a bit of a twist. I'd like the center "content" column to stay forever centered on the screen. The column on the right side is a fixed width, but I'd like the column on the left to be fluid. The intention is that a logo located within the left column will resize down to accommodate a 980px wide screen without obstructing the any part of the logo, but I'd also like to go to a maximum 450px with for larger resolution screens.

---------------------------------------------------------------------------------
| Fluid, image     |                                       |                    |
| inside resizes   |           Content column              | Nav column         |
| max-width: 450px |           fixed width: 600px          | fixed width: 200px |
| min-width: 180px |                                       |                    |
---------------------------------------------------------------------------------

Here's the best I've been able to accomplish, but it's a pretty convoluted method with negative margin spacings. With the way the left column was accomplished, I can't keep the "content" column actually centered, though.

Any suggestions? Thanks!

jfiddle

Upvotes: 2

Views: 1328

Answers (2)

mmmeff
mmmeff

Reputation: 1033

If you're not entirely concerned with IE9 compatibility, I highly recommend using flexbox to display your columns.

html:

<div class='container'>
    <div class='column left'>left</div>
    <div class='column middle'>middle</div>
    <div class='column right'>right</div>
</div>

css (styling removed):

body,
html {
    height: 100%;    
}

.container {
    display: flex;
    height: 100%;
    width: 100%;
}

.left {
    min-width: 180px;
    max-width: 450px;
    width: 100%;
}

.middle {
    flex-shrink: 0;
    width: 600px;
}

.right {
    flex-shrink: 0;
    width: 200px;
}

JSFiddle (with styling): http://jsfiddle.net/379MA/

If you're looking to learn more on flexbox, I recommend the guide on css-tricks:

A comprehensive guide to flexbox can be found here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

if you use display:table , you can access to property of table layout without using one.

It should then be easy to get something close to what you are looking for : http://jsfiddle.net/v5yP3/4/ 

html {
    background: yellow;
}
#wrapper {
    margin: 0 auto;
    max-width: 1250px;
    min-width: 980px;
    background: #fff;
    display:table;
}
#leftcolumn, #rightcolumn {
    display:table-cell;
    width:450px;
}
#rightcolumn {
    width:200px;
}
#contentcolumn {
    display:table-cell;
    width: 600px;
    background: blue;
}
img {
    width:180px;
    min-width: 100%;
    vertical-align:top;
}

edit : fixed right colum width

Upvotes: 1

Related Questions