Center a Div that Contains Floating Elements

The basic example below shows almost what I am looking for. The labels are directly above the text boxes, and each label and text box group are laid out side by side. I am just wondering how to center the entire texbox_group div on the page.

Here's my html:

<div id="textbox_group">
      <div>
            <label>Label 1</label>
            <input type="text" />
      </div>
      <div>
            <label>Label 2</label>
            <input type="text" />
      </div>
      <div>
            <label>Label 3</label>
            <input type="text" />
      </div>
      <div>
            <label>Label 4</label>
            <input type="text" />
      </div>
</div>

and my css:

#textbox_group { clear: both; }
#textbox_group div { float: left; margin: 5px; }
#textbox_group div label { display: block; }
#textbox_group div input { width: 50px; }

LVL 15
DanielSKimAsked:
Who is Participating?
 
KennyTMCommented:
#textbox_group {
   margin: auto;       /* works in Fx and should also all standard-compliance browsers */
}

/* use Conditional Comments to nest the following to make it work in IE only */
<!--[if IE]>
<style>
...
#textbox_group {
    text-align: center;
}
#textbox_group div {
    text-align: left;
}
...
</style>
<![endif]-->
0
 
KennyTMCommented:
For the Internet Explorer you'll actually need to wrap the entire #textbox_group with another <div> and apply text-align: center; on that <div>, i.e.,

<div id="textbox_container">
<div id="textbox_group">
...
</div>
</div>

...

#textbox_container{
    text-align: center;
}
#textbox_group {
    text-align: left;
}
0
 
GrandSchtroumpfCommented:
To center it, you need to specify a width on the #textbox_group:

#textbox_group {
  clear: both;
  width: 20em;
  margin: 0 auto;
}

The other solution is to use a table...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.