?
Solved

Center a Div that Contains Floating Elements

Posted on 2006-06-08
5
Medium Priority
?
1,746 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 1000 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 1000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month15 days, 1 hour left to enroll

771 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