Solved

Center a Div that Contains Floating Elements

Posted on 2006-06-08
5
1,744 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

Industry Leaders: 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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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