css - Center DIV Within a DIV?

Question

I need help in centering one DIV withing a DIV.

I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.

Within headerContainer, I want 3 more DIVs:

• A Left DIV (400px wide)
• A Center DIV (100px wide)
• A right DIV (200px wide).

I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.

Thanks for any help.

Answer 1

CSS:

.leftDiv{
  float: left;
  width: 400px;
}
.rightDiv{
  float: right;
  width: 200px;
}
.centerDiv{
  width: 100px;
  margin: 0 auto;
}

HTML:

<div>
   <div class="leftDiv">left</div>
   <div class="rightDiv">right</div>
   <div class="centerDiv">center</div>
</div>

DEMO:

Code: http://jsfiddle.net/Xxwrm/6/

Fullscreen: http://jsfiddle.net/Xxwrm/6/show