CSS Forum

However, with regard to: And div "center" always be the center

1) There is no declaration to center <div class="center">.

2) {float: left;} in that declaration ensures that it will be flush left and never centered.

3) To correct: Remove {float: left;} - and then add {margin: 0 auto;}

3B) Given the HTML you will probably want to deal with clearing the previous HTML of <div class="left">, which is floated, with {clear: left;}

4) The following will clear the previous <div> and center the center <div> -

div.center{
/**********float: left;*/
width: 700px;
height: 686px;
background-color: #5292d9;
margin: 0 auto;
clear: left;
}
...........................

NOTE: <div class="right"> has {float: left;} declared in the CSS. Do you intend this?

I think what you meant was to apply this to the body, which will likely make your problem go away. It's likely because although the width is 50%, the padding and margins on the body itself make the body area too narrow for a true "50%."

I would remove the specific selectors, from

div.left

to

.left

So those selectors can be used on other elements as you need them.

I'm also confused as to why "center" is floated left.

To float elements around other elements, put your floats first:

<div class="left">this will float left</div>
<div class="right">this will float right</div>
<div class="center">If there is room between the two, which there won't be at 50%, this would normally display between the two.</div>

When in doubt, put borders on the divs temporarily, but note that this will mess up the "50%" since it's now wider than 50%.. Temporarily reduce the width to 49%;.

Last, only use a class if you foresee these items being reused on the same page - looks to me like ID's will work just fine. An ID is appropriate if the element is unique to each page (i.e., only one named ID per page.)

I'm not sure what you are after here, but to truly center the .center class you'll probably need a wrapper, hence "center-container."