2

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

gsnerf
  • 573
  • 1
  • 4
  • 15
andrewgcross
  • 253
  • 2
  • 13
  • Can't get the jsfiddle to work on my ipad right now (grr) butt he basic recipe is to lose the margins completely, float the left column to the left, float the right column right, and give the middle column `margin-left:auto;margin-right:auto`. So long as the middle column is fixed width, it should automatically center. http://webdesign.about.com/od/css/ht/htcsscenterfix.htm gives the lowdown on centering elements. You might need to shuffle the order of those three divs around in the HTML though. – StackExchange What The Heck Jan 08 '14 at 23:08
  • Take a look at this question: http://stackoverflow.com/questions/26001765/research-on-creating-grids-that-combine-percentage-and-static-e-g-pixel-value – luke Dec 16 '16 at 22:09

2 Answers2

1

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

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

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/

mmmeff
  • 1,025
  • 9
  • 20