I have been trying to place div containers into a main content div container. When I place the containers I have trouble as they don't want to align evenly, I've tried using absolute and relative on the 2 div containers but either one floats to the right or overlaps the other.

I have main div content container: (contentWrapper)
centered on page
width: 957px
height: 342px

left div container: (leftContent)
width: 313px
height 320px
margin: 19px 0 81px 32px

right div container: (rightContent)
width: 494px
height: 342px
margin: 19px 71px 30px 0

So basically its a main content container with 2 column containers inside of it.

I have tried coding it like this:

html:

<div id="contentWrapper">

<div id="leftContent">Left Content Blah Blah Blah </div>

<div id="rightContent">Right Content Content Blah Blah Blah </div>

</div>


css:

#contentWrapper {
border: 1px solid black;
height: 342px;
width: 957px;
margin: 0 auto;
position:relative;
}

#leftContent {
position:absolute;
top:0;
left:0;
width:313x;
height:320px;
border: 1px solid red;
}

#rightContent {
position:absolute;
top:0;
right:0;
width:494x;
height:342px;
border: 1px solid red;
}


What happens to the boxes is that they are not proportional to the sizes I have given them and I want to be able to move them inside the main content container so I can have the padding of 32px from left side and padding of 71 from right side. Not sure if the correct way is to use padding or margins to position the entire 2 containers inside the main container?

Please someone let me know if I'm coding this the correct way through CSS? Thanks.

Get RID! of the position absolutes and float left the two containers inside the wrapper, use position relative on the wrapper and the left container and use margins to set the right container.

clear the floats before closing then wrapper element.

I have done as you said but as a result I get the left container on the top and the right container on the bottom instead of the 2 containers side by side?

is the code you posted the actual code from the site you're building? Because there are two typos: "width:313x;" should be "width: 313px;" and "width:494x;" should be "width: 494px"

It is 3am and yes I did typo, now is all fine and working!!!

Thank you for your help!!! :-)