Solved

Center a Div that Contains Floating Elements

Posted on 2006-06-08
5
1,743 Views
Last Modified: 2012-06-21
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; }

0
Comment
Question by:DanielSKim
  • 2
5 Comments
 
LVL 8

Accepted Solution

by:
KennyTM earned 250 total points
ID: 16868852
#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
 
LVL 8

Expert Comment

by:KennyTM
ID: 16868899
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
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 250 total points
ID: 16869007
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

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question