Solved

Center a Div that Contains Floating Elements

Posted on 2006-06-08
5
1,745 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

688 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