Home/ Questions/Q 143739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T08:08:34+00:00

I want a centered header DIV and inside it the following absolutely positioned DIVs:

  • 0

I want a centered header DIV and inside it the following absolutely positioned DIVs:

  • logo
  • menu
  • line
  • title

But my HTML/CSS has two problems:

  • for some reason the page is now wider (see bottom scroll bar)
  • If my title is longer, I want it to be right-aligned of course

What I really want is a centered DIV and inside that I want to position DIVs absolutely within their centered parent (but not absolute since they wouldn’t be centered). Is this possible?

How would you accomplish this layout?

alt text http://tanguay.info/web/external/centeredLayoutProblem.png

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html> <head>  <style type='text/css'>     #headerArea {         background-color: yellow;         margin: 0px auto;         width: 760px;         height: 150px;     }      #logo {         position: relative;         top: 20px;         left: 20px;         background-color: orange;         text-align: center;         font-size: 32pt;         width: 150px;         padding: 10px;         z-index: 10;     }      #menu {         position: relative;         top: -52px;         right: -480px;         background-color: tomato;         text-align: center;         font-size: 14pt;         width: 240px;         padding: 10px;     }      #title {         position: relative;         top: -35px;         right: -620px;         font-style: italic;         font-size: 14pt;     }      #line {         position: relative;         top: -60px;         border-bottom: 1px solid blue;         margin: 0 20px;     } </style>  </head>  <body>     <div id='headerArea'>         <div id='logo'>LOGO</div>         <div id='menu'>One&nbsp;&nbsp;Two&nbsp;&nbsp;Three&nbsp;&nbsp;Four&nbsp;&nbsp;Five</div>         <div id='title'>This is the Title a Bit Longer</div>         <div id='line'></div>     </div> </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0