Centrally Horizontally Positioning Div elements - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Centrally Horizontally Positioning Div elements

Help Please, Frustrating

lucasm

1:28 am on Nov 14, 2007 (gmt 0)

10+ Year Member

I am very new to all this. Just started a week ago. And I don't know at the moment a nicer way to post my code so please bear with me.
And if this has been covered already, I did not know.
If you run this code in Internet explorer, You can see what I want to get.
But if you run it in mozilla for example, not good.
I want three (or any number realistically) div elements centrally aligned on the same horizontal plane. Here is code:
//////////////////////Code//////////////////////////////////
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
<title>Frustration</title>
</head>

<body>
<div id="holder">
<ul>
<li>
<div id="item">
</div>
</li>
<li>
<div id="item">
</div>
</li>
<li>
<div id="item">
</div>
</li>
</ul>
</div>

</body>
//////////////////End Code/////////////////////////////////////

And here is my CSS code

////////////////////////CSS CODE///////////////////////////////
ul{
}

ul li{
list-style-type: none;
display: inline;
border: solid #ff0000 1px;
}

#item{
height: 125px;
width: 100px;
display: inline;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 0;
margin-top: 0;
border: solid #ffffff 1px;
background-color: #00ffff;
}

#holder{
text-align: center;
}

Setek

7:43 am on Nov 14, 2007 (gmt 0)

10+ Year Member

The reason why the Gecko rendering engine is having a problem is because the code you have written is not standards-compliant.

1. An ID is what it says: identification. You can only have one per page. If you are going to have many, use a class.

2. IE will allow an inline element to have a forced width; in standards-compliance, an inline element is inline--how can it have a width?

There are a couple of ways to do this, but in order to it's best to get more information: what kind of content are you putting into these four centered columns?

Is each column completely unrelated to another?

lucasm

4:52 pm on Nov 14, 2007 (gmt 0)

10+ Year Member

Thanks for the clarification about the ID tags. Didn't realize it was bad practice.
What I am wanting to get in the end is a horizontal kinda menu bar with each option appearing as a logo and a descriptive text tag below contained in each of the 'item' divisions. So the format in all the divisions will be identical. I got it working the way I like that works in both browsers by using an unlisted list of tables instead of div's but I realize that that is not the ideal situation. If that clarifies things.

lucasm

2:33 am on Nov 15, 2007 (gmt 0)

10+ Year Member

I think I figured something out after fiddling on the tryit1.4 editor at the w3schools website that would work for me and it is a nifty trick others might be interested in too. I used the float property but as there is no center float, I made a container div centered that was just wide enough to hold the item div's. Only thing is, the item div's have to be just the right width and margin to work. But it works in both IE and mozilla and Opera. The 3 browsers I have to test with.

//////////////////////////CODE////////////////////////////////////////
<html>
<head>

<style type="text/css">
div.holder{
text-align: center;
width: 240px;
margin-left: auto;
margin-right: auto;
}

div.Item{
float: left;
/*display: inline;*/
margin: 10px;
width: 100px;
}
div.Bottom{
/*display:inline;*/
}
div.Top{
/*display: inline;*/
}
div.Center_for_IE{
text-align: center;
}
</style>

</head>

<body>
<div class="Center_for_IE">
<div class="Holder">
<div class="Item">
<div class ="Top">TOP1</div>
<div class ="Bottom">BOTTOM1</div>
</div>
<div class ="Item">
<div class ="Top">TOP2</div>
<div class ="Bottom">BOTTOM2</div>
</div>
</div>
</div>

</body>
</html>