INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Can't center a div container

Can't center a div container

(OP)
I have an issue where I am trying to line up 3 containers where the 1st container is on the left and the last container is on the right. The middle container would be in the center of the page. This allows the page to change sized with all containers being the same distance between each container.

I did get the outside containers to work correctly but not the middle container which contains some text and a couple of tables with customer data in it.

Here is a completely stripped down version of the problem.

It Is now an html file and this issue is, I want to center both the 1st text and the green box containing the second text. The div surrounding the green box won't center. It stays on the left.

What I really want is to center the div that surrounds the inner divs and have the 1st label left justified (inside the dive) so it is over the left side of the green box.

The purple box is the container of both texts. The green box and 1st text should move together as one unit but they don’t.

CODE

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
</head>
<body>

   <div style="float: left; height: 50px; width: 60%; border: 1px solid red">
      <div style="text-align: center;">
         <div style="border: 1px solid purple">
            <div>
               <span>Enter Item Quantities and Then Add to List</span>
            </div>
            <div class="listboxBorderColor" style="border: 2px solid green;width: 445px;">
                 This is a test
            </div>
         </div>
      </div>
   </div>
</body>
</html> 

Anyone know why this doesn't work?

Thanks,

Tom

RE: Can't center a div container

You cannot 'float' a block element (other than float:none;) AND have it centered.

The text-align: property applies to inline child elements only.

To make a block element 'centre' in it's parent, requires it to have a set width (of less than the parent width) and have the left and right margins set to a value of 'auto;'.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Can't center a div container

(OP)
Hi Chris,

That was what I was looking for.

Thanks,

Tom

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close