ansaurus

Question

Is this the way to do absolute/relative/static CSS DIVs?

Answer 1

+2 A:

Make your #headerArea div position:relative. Then, for all your inner divs, you can position:absolute in relation to #headerArea.

Like so:

<style type="text/css">
    #headerArea {
        position:relative;
        background-color: yellow;
        margin: 0px auto;
        width: 760px;
        height: 150px;
    }

    #logo {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: orange;
        text-align: center;
        font-size: 32pt;
        width: 150px;
        padding: 10px;
        z-index: 10;
    }

    #menu {
        position: absolute;
        top: 20px;
        left: 480px;
        background-color: tomato;
        text-align: center;
        font-size: 14pt;
        width: 240px;
        padding: 10px;
    }

    #title {
        position: absolute;
        top: 80px;
        left: 20px;
    width: 720px;
    text-align: right;
        font-style: italic;
        font-size: 14pt;
    }

    #line {
        position: absolute;
width: 720px; 
height: 1px;
        top: 70px;
        border-bottom: 1px solid blue;
        margin: 0 20px;
    } 
</style>

You should use the 'left' property instead of 'right' since 'right' doesn't work in ie6.

The 'left' and 'top' values I've put in may be a little off, but you can tweak to get what you want.

EDIT:

I've corrected the pixel values, and added a width to your line div, and a height since IE defaults all divs to one text line high.

Also, your title div should be full width with text-align right so that the title will expand to the left instead of the right.

Joel Potter 2009-03-07 15:10:22

awesome, looks good in all four test browsers, learned something too, thanks!

Edward Tanguay 2009-03-07 15:44:08

Answer 2

+1 A:

Yes. If you do #headerArea{position:relative;} you can have position:absolute on the children and their position will be relative to the parent.

svinto 2009-03-07 15:11:57

Answer 3

+1 A:

Use position:relative on the header (as has already been suggested) so that it becomes a layer, then the absolutely positioned elements inside it will use that element as origin.

You can place the line before the logo in the markup, then you don't need to use z-index to put the logo on top of the line. All browsers doesn't handle z-index the same...

By placing the title to the right, it will expand to the left as needed.

Use a top border instead of a bottom border on the line, that elliminates the problem with IE wanting to make the element at least one character high.

I removed some unneccesary styles, and added a title to the page (as that is required in a proper html document).

This will display consistently in Firefox 3, IE 7, IE 8, Opera 9 and Chrome 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://data.w3.org/1999/xhtml"&gt;
<head>
    <title>Title</title>

<style type="text/css">

body {
    margin: 0;
    padding: 10px;
}

#headerArea {
    position: relative;
    background: yellow;
    margin: 0 auto;
    width: 760px;
    height: 150px;
}

#headerArea div {
    position: absolute;
}

#logo {
    top: 20px;
    left: 20px;
    background: orange;
    text-align: center;
    font-size: 32pt;
    width: 150px;
    padding: 10px;
}

#menu {
    top: 20px;
    right: 20px;
    background: tomato;
    text-align: center;
    font-size: 14pt;
    width: 240px;
    padding: 10px;
}


#line {
    top: 80px;
    left: 20px;
    width: 720px;
    border-top: 1px solid blue;
}

#title {
    top: 90px;
    right: 20px;
    font-style: italic;
    font-size: 14pt;
}

</style>

</head>

<body>
    <div id="headerArea">
     <div id="line"></div>
     <div id="logo">LOGO</div>
     <div id="menu">One Two Three Four Five</div>
     <div id="title">This is the Title a Bit Longer</div>
    </div>
</body>
</html>

(You may need to adjust the positioning to get it exactly as you want, but that should be quite easy.)

Guffa 2009-03-07 15:36:00

ansaurus

tags:

views:

answers:

Is this the way to do absolute/relative/static CSS DIVs?

related questions