PDA

View Full Version : centering divs

cooldaddy
06-06-2006, 01:19 PM
I've got some problems aligning my menu and content div. My css looks like this:



#holder{
width: 800px;
margin: 0px auto;
}

#lh-col{
position: absolute;
top: 20px;
left: 20px;
width: 230px;
border: 2px solid #cc0033;
background: #fff;
color: #000;
margin: 0px;
padding: 0px;
height: 400px;
}

#rh-col{
margin: 20px 20px 20px 220px;
border: 2px solid #cc0033;
background: #ccc url('F:\filesl\2c-lc-static\backgr.jpg') repeat-x;;
width: 640px;
color: #333333;
padding-left: 80px;
padding-right: 50px;
height: 600px;
}

And the html is build up in this way:
<body>
<div id="holder>

<div id="lh-col">
some html
</div>

<div id="rh-col">
some html
</div>

</div>
</body>


How can I get both the divs lh- and rh-col centered in the screen ?
ronaldb66
06-06-2006, 01:29 PM
Do you mean: have both divs side by side in the #holder div, which is centered in the browser window?
Although absolute positioning might not be the best approach (you could float the #lh-col left and the #rh-col right), to have the #holder div serve as a positioning parent rather than the root--which is the case now, add "position: relative;" to the #holder style rule.
cooldaddy
06-06-2006, 02:19 PM
Ive added " position: relative; " to the holder div, but it doesnt help.



quote: "Do you mean: have both divs side by side in the #holder div, which is centered in the browser window?"

Yes, thats what I want
VIPStephan
06-06-2006, 03:20 PM
#lh-col{
float: left;
...
}


Delete all that positioning stuff. You might have to add a width to the floated div.
cooldaddy
06-06-2006, 05:08 PM
ok, I've done that, it's centered now... but it displays the 'rh-col div' (where my content is) beneath the 'lh-col div'. It should be next to it, with the lh-col div slightly overlapping the rh-col div.
VIPStephan
06-06-2006, 05:31 PM
Well... it's probably the width of one of those divs. From here I'd guess you need to make the rh-col a little narrower that it fits in between the left div and the edge of the holder div.
Or an even better solution is to float the rh-col to the right! Yeah, try this (and don't forget to apply a width). :)

And I just noticed an error in the code you posted earlier. You forgot a closing double quote:

<body>
<div id="holder">

<div id="lh-col">
some html


Do you have it online somewhere? That makes it easier for us to figure out the proper solution without guessing.