ansaurus

Question

CSS/DIV Woes

Answer 1

+4 A:

Use Faux columns. Below is a working example I threw together (without the background image).

Also, I've made a few changes to your CSS.

For your CSS, I made a poor man's reset.css, consisting of 1 rule. You shouldn't use * to select all elements and reset things, instead, use a real reset css stylesheet.
I used faux columns, without the background image (I left a comment where it would go)
I used a "modern" approach to clear the floats for my columns from quirksmode.org. It works in all browsers and keeps your markup cleaner.
I renamed your column IDs. This is to keep your markup more semantic. Your IDs and classes should have semantic names that define content, not style. Your CSS defines the style, not your HTML. It is a good practice to keep things that way.

The CSS:

html, body, form, div {
    margin: 0;
    padding: 0;
    border: 0;
}
#header {
    height:80px;
    border: 1px solid #000;
}
#footer  {
    height: 80px;
    border: 1px solid #000;
}
.wrapper {
    width: 100%;
    overflow: auto;
    border: 1px solid #000;
    /* Place faux column background image rule here */
}

#nav {
    float: left;
    width: 25%;
}

#content {
    float: left;
    width: 75%;
}

And the HTML:

<head>
    <title></title>
    <link href="Core.css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">Header</div>
        <div class="wrapper">
            <div id="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div id="conent">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div id="footer">Some footer content</div>
    </form>
</body>
</html>

Dan Herbert 2009-07-15 20:33:47

Answer 2

+1 A:

EDIT: Dan beat me to it.

Use faux columns for the same effect. Essentially you create a background images that repeats downward that's the width of the column(s), making it look like it extends all the way down when it doesn't.

Trying to make equal-height columns in css without resorting to fixed-height or other hacks is going to give you nothing but pain.

Gabriel Hurley 2009-07-15 20:38:15

ansaurus

tags:

views:

answers:

CSS/DIV Woes

related questions