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.
Anyone know why this doesn't work?
Thanks,
Tom
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
Talk To Other Members
RE: Can't center a div container
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
That was what I was looking for.
Thanks,
Tom