tags:

views:

1818

answers:

2


Solved! Finished CSS and HTML at bottom.


Ok, so here is the situation. I have a page with a div on the side, on top, and on bottom. The div on the side is on the left at 225px. The div on top is 25px, and the div on bottom is 20px. What I want is a div in the middle of them all, and so it resizes (and is scrollable) based on the visitors browser size. What I have works, but will not scroll, and is not the right width so I have to center all my content in it. Its just using the width of the browser, but pushed over a bit with a margin, so its actually hanging over underneath the sidebar.

A quick sketch of how it's setup.

Any ideas?

Key: menu is the top. bottom_menu is the bottom menu. content is the part I need help with, in the center. sidebar is what goes on the side.

CSS:

@charset "UTF-8";
/* CSS Document */

html {
    height:100%;
}

img
{
    border-style: none;
    color: #FFF;
    text-align: center;
}

body {
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    background-color:#000;
}

.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    width:225px;
    min-height:100%;
    position:fixed;
    top:25px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
    padding-top:5px;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
    }

.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    width:100%;
    height:25px;
    position:fixed;
    top:0px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
}

.content {
    width:100%;
    top:25px;
    height:100%;
    overflow:hidden;
    position:fixed;
    padding-left:5px;
    padding-top:5px;
    background-color:#FFF;
    margin-left:112px;
    font: 14px Helvetica, Arial, Sans-Serif;
}

.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    width:100%;
    height:20px;
    position:fixed;
    bottom:0px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
}

HTML (DIV Placement):

<body>
<div class="sidebar">CONTENT IN SIDEBAR</div>
<div class="menu">CONTENT IN TOP MENU</div>
<div class="bottom_menu">CONTENT IN BOTTOM MENU</div>
<div class="content">CONTENT IN CONTENT</div>
</body>


Finished CSS

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    text-align: center;
}
body {
    background-color:#000;
    margin:0;
    padding:0;
    border:0;   /* This removes the border around the viewport in old versions of IE */
    width:100%;
    height:100%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
    min-height:100%;
}
.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    height:25px;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    top:0px;
    z-index:5;
    background-color:#000;
}
.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    height:20px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    bottom:0px;
}
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden; /* This chops off any overhanging divs */
    min-height:100%;
}
.sidebar .colright {
    float:left;
    width:200%;
    position:relative;
    left:225px;
    background:#fff;
}
.sidebar .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:225px;
}
.sidebar .col1 {
    margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
    position:relative;
    right:100%;
    overflow:hidden;
}
.sidebar .col2 {
    float:left;
    width:225px;
    position:fixed;
    top:0px;
    left:0px;
    margin-top:25px;
    margin-left:5px;
    right:225px;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

Finished HTML:

<body>
<div class="menu">HEADER CONTENT</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1">
                 CONTENT
            </div>
        </div>
        <div class="col2">
            LEFT SIDEBAR CONTENT
        </div>
    </div>
</div>
<div class="bottom_menu">FOOTER CONTENT</div>
<div class="clear"></div>
</body>
+2  A: 

You mean something like this: The 'Left Menu' 2 column Liquid Layout (Pixel-widths)?

Frank Krueger
Thank you for the link. This worked great with quite a bit of tweaking.
Devin Pitcher
Any chance you could post what you ended up with? I've had various levels of success trying to do this before but was never completely satisfied with the solutions I've come up with.
Loktar
Finished content posted above.
Devin Pitcher
+2  A: 

CSS doesn't handle this well - though it can be done with relative ease.

The problem is that divs are only self aware - they can't do "look at my adjacent sibling and make me the same height"

There are ways using large paddings and negative margins, though they fail at a number of things

  • Can't use in page anchor links. e.g. page.html#section-b
  • Can fail to print properly in older browsers.
  • Can not have elements appearing outside - as it set's display: hidden on the wrapper container.

Having said that, it is possible, and I've done it recently a few times. The site that Frank suggests in his answer is where I went to learn it and use it properly. I'd recommend examining the source and CSS of that page. Firebug can help greatly here.

When the CSS property display: table and it's friends become widespread supported (IE8 just incorporated this), it'll be much easier to do this sort of thing.

alex
Thank you. This helped.
Devin Pitcher