0

I know this is one of those Web 1.0 newbie questions, but alas, I am in a position to be asking it myself. I do sites that do not necessitate this sort of layout and am now looking at doing one for a friend with a three-column layout, fixed-width center column...with the twist of no header or footer box elements and the stip that all three columns stretch height-wise to fit the size of any screen on which they are viewed.

Further exacerbating this issue is that the body will have one color or background image and the center column will have its own background color or image.

Visually, the page layout would be as such:

+----------+---------------+----------+
|nothing   |only content   |nothing   |
|here      |will be here   |here      |
|just the  |w/a different  |just the  |
|body b/g  |background     |body b/g  |
|color or  |color or       |color or  |
|image     |image          |image     |
|          |               |          |
|          |all 3 columns  |          |
|          |always fill    |          |
|          |screen height  |          |
+----------+---------------+----------+

I have read some interesting arguments against absolute positioning (Adobe forums) which obviously clash with faux columns and other absolute/relative positioning. Ideally I'd like to do it all with floats but am just not sure as to the most efficient way to accomplish this. To date I have not tried anything because this only just fell into my lap. Again, I know this is basic, but when I come from doing sites with one B/G color and centered elements it has me thinking, 'Why is this so hard?'

mileaminute
  • 113
  • 1
  • 8

2 Answers2

0

Set a width on the center column and give it margin: auto. That applies equal margins on both sides of a block-level element.

CSS

#center {
    width: 33.33%;
    margin: auto;
}
thgaskell
  • 12,772
  • 5
  • 32
  • 38
0

Not sure if you intend for the middle section to be wider than the side columns - if you do you will want it to be wider than 33.3%.

For height, you want:

    html, body {
      height: 100%;
    }

Then ensure your central div is

  position: relative;
  height: 100%;
  margin: 0 auto;

See fiddle here http://jsfiddle.net/mWqwD/

aroundtheworld
  • 731
  • 1
  • 5
  • 15
  • That is perfect! Just one question...if I place any content inside the `.one` div that is taller than the browser window causing a vertical scroll bar to appear, I notice that `.one` stops at the bottom of the window and the content continues downward beyond it. The `.one` div is not stretching to take up the additional space that the content does. Is there any way around this? – mileaminute Mar 13 '13 at 17:53
  • Changing height to min-height should solve it, like this? http://jsfiddle.net/mWqwD/1/ – aroundtheworld Mar 13 '13 at 21:17
  • I just tried it and no luck...still having the same issue where the div retains a height of the browser window and will not extend downward. – mileaminute Mar 14 '13 at 19:22
  • Here's what I realized, I have other container divs inside the main div. So in your code, `.one` has a div for the header graphic, another for some header text, a photo and more text below the photo and finally a div for the footer graphic and footer text. The `.one` div stops height-wise at the bottom of the browser window while the rest of the divs inside it poke out the bottom. So I created a copy of the page and removed all of the divs inside `.one` and your solution worked like a charm. New question is, can I do this with container divs inside `.one`? – mileaminute Mar 14 '13 at 20:05
  • If you need your content to have a dynamic height, also use the min-height property there instead of a height. By using min-height you are saying 'be a minimum of 50px, but otherwise expand with the content inside it'. I did a quick example here. You can add or remove content to the .content div and it expands everything as required. http://jsfiddle.net/mWqwD/3/ – aroundtheworld Mar 14 '13 at 23:31
  • I tried adding the `min-height` to my various and trouble-causing divs and I am not getting any different results. I feel that I am close to getting this, but somehow, I am missing the obvious. – mileaminute Mar 15 '13 at 05:10
  • It's taken a while to get back to you, here's the fiddle showing the problem I'm having: http://jsfiddle.net/mileaminute/KmDb5/ and here's another showing the result of removing all `div`s from the main wrapper/container: http://jsfiddle.net/mileaminute/UTLWs/ Hopefully this helps. Thank you! – mileaminute Mar 19 '13 at 18:20
  • The problem appears to be the way you are mixing float elements with non. There is no obvious reason you need all of your divs floated here so instead you can target all divs in the #wrapper with '#wrapper div {...}' and center them with margin: 0 auto. See here - I think this is what you are trying to do http://jsfiddle.net/KmDb5/1/ – aroundtheworld Mar 21 '13 at 02:58
  • My man, I must say, you are a bloody GENIUS! I feel a bit foolish now, in spite of hand-coding for several years, you can see that I am still daft with regards to some of the basics. How this targeting of divs is something I never managed to learn is beyond me. So simple, so elegant. I simply can not thank you enough! – mileaminute Mar 21 '13 at 23:18
  • For all of you reading this thread, it took us to get to the end of this discussion to completely nail it. Follow the fiddles and you'll hopefully gain the insight that evaded me for too many years. – mileaminute Mar 21 '13 at 23:20