Simple CSS MasterPage layout.

Question

I'm helpless, tried my best understanding CSS but it's just not for me.

I would like to make a really simple MasterPage:

• at the top a div of full width and height 40px (1)
• at the bottom also a div of full width and height 40px (2)
• in the middle:
  
  • on the left: a div of width 200 px (3)
  • on the right side of the left div: a div with contentPlaceHolder (4)

What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.

This is my master page html:

<div>
    <div class="header">
    </div>
    <div>
        <div class="links">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="footer">
    </div>
</div>

What kind of CSS do I have to write to make this finally work?

Answer 1

Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.

There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)

Answer 2

To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.

For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.

<div style="min-width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

You could also use width instead of min-width:

<div style="width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.

Be aware that min-width is not supported by IE6.

Answer 3

.Header , .footer
{
height:10%;
width:100%
}
.Links
{
width:25%:
}
.Content
{
width:75%;
}
.Links , .Content
{
height:80%;
float:left;
}

I would recommend using percents instead of pixels as it is easier to handle when modifying the page size.

you might need a float for the header and footer.

Answer 4

Here's a quick stab at specific CSS/Markup for this problem.

Markup:

<!-- Header, etc. -->
<div class="contentView">
    <div class="links">
    </div>
    <div class="content">
    </div>
</div>
<!-- Footer, etc. -->

CSS:

.contentView {
    /* Causes absolutely positioned children to be positioned relative to this object */
    position: relative;
}

.links {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.content {
    padding-left: 200px;
}

You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.

This ends up looking like this (.content is green, .links is red):