Having left and right content boxes css

Question

I have an html document and a css file with it. Here is what the code section I am working on looks like:

<div class="contentcenter">
    <div class="contentleft">
        <h1>Left</h1>
        <p>Pellentesque habitant morbi ...</p>
    </div>

    <div class="contentright">
        <h1>Right</h1>
        <p>Pellentesque habitant morbi ...</p>
    </div>
</div>

I have a picture that is 1000px wide centered above these elements, and I want the left element to align in the center of the page such that it begins at the left-most edge of the picture towards the middle, have a gap, and then have the right element display and reach to the right-most border of the picture. e.g.

|--------------Picture--------------------------|
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|-----------------------------------------------|

|--left--------------|    |-------right---------|
|                    |    |                     |
|                    |    |                     |
|                    |    |                     |
|                    |    |                     |
|--------------------|    |---------------------|

All of this, would be centered in the page. Here is my css, but it doesn't give me the result I am looking for.

.contentcenter
{
    margin:0 auto;
    padding:0;
    width=1000px;
    border:3px solid red;
}
.contentleft,
.contentright
{
    position:inherit;
    float:left;
    margin: 50px auto;
    width:auto;
    max-width:450px;
    border:3px solid #00CD00;
    padding:0;
    font-family:Arial, Times, serif;
}
.contentleft h1,
.contentright h1
{
    margin:0;
    padding:0;
    color:white;
    font-family:Arial;
    display:block;
    background-color:#00CD00;
    padding: 5px 0;
}

Answer 1

Kind of know your problem, apart from having the left and right boxes begin from left and right. you want the entire content to be centered as well

My solution goes here : http://jsfiddle.net/rvjd7/

Before we begin explaining the code:

1. width=1000px does not make sense in css. it should be width:1000px (with a colon)

2. your html is the same

3. Here is your css: notice that one box is floated to the left while the other one is floated to the right. contentcenter however is given overflow:auto so that it can contain the two floated children contentleft and contentright.

.picture{ width:1000px; margin:0 auto; }

.contentcenter
{
margin:0 auto;
padding:0;
width:1000px;
background-color:lightgrey;
overflow:auto;
}
.contentleft,
.contentright
{
position:inherit;
float:left;
margin: 0px 0px 50px 0px;
width:auto;
max-width:450px;
border:3px solid #00CD00;
padding:0;
font-family:Arial, Times, serif;
}
.contentright
{
position:inherit;
float:right;
margin: 0px 0px 50px 0px;
width:auto;
max-width:450px;
border:3px solid #00CD00;
padding:0;
font-family:Arial, Times, serif;
}
.contentleft h1,
.contentright h1
{
margin:0;
padding:0;
color:white;
font-family:Arial;
display:block;
background-color:#00CD00;
padding: 5px 0;
}