<center> + float: left != center [Archive]

Elliott Hird

06-03-2006, 11:45 AM

Once upon a time, there was a <center>.

Inside there were three <table class="block">s.

.block { float: left; } was a fact of life.

Unfortunately, the <table class="block">s were not centered side by side.

I am confused. Any help would be appreciated :eek:

GaryS

06-03-2006, 12:02 PM

Is the "container" wide enough / are the tables narrow enough?

Elliott Hird

06-03-2006, 12:07 PM

the container has no width specified, the tables are 30%.

GaryS

06-03-2006, 12:10 PM

Might try specifing 100% for the container (and give it a border - temporarily - so that you can see if it's really wide enough)

Elliott Hird

06-03-2006, 12:13 PM

I've tried giving it a border. It's 100% by default, it seems.

GaryS

06-03-2006, 12:22 PM

Could you post your code?

Elliott Hird

06-03-2006, 12:29 PM

I can do better: a demo.

http://www.developer7.org/rpg/

Just enter any username and password and hit register, it'll take you to the offending page.

GaryS

06-03-2006, 12:34 PM

Think I'd misunderstood you earlier: I though the problem was that the tables were not ending up side by side...

... think you're saying that the tables are floating (so that they end up side by side), but they're not ending up in the middle of the containing div?

Is that what you're trying to achieve?

Elliott Hird

06-03-2006, 12:37 PM

Yeah, they should be in the middle, side by side.

Any help would be greatly appreciated :)

ray326

06-03-2006, 12:48 PM

Add text-align:center to your body and margin:0 auto to the table. Dump the table.block style.

Elliott Hird

06-03-2006, 12:49 PM

And lose the float?

GaryS

06-03-2006, 12:50 PM

Apologies for the rushed reply - I need to head off. Hope this will get you moving again:

Forgetting about the table for a minute, the way to center a DIV is to (a) make sure that the container is 100% and has text-align: center, then (b) give the DIV a width and left and right margins of "auto".

Back to your tables: it might be that wrapping this new div around your tables and giving it a width of 90% will do the trick...

... however... you might want to think about swapping your float lefts for a three column table. (I'm a huge fan of CSS... but sometimes a table is easier to handle).

Again, sorry for the rushed post. Good luck!

******

Ooops - just seen the ray236's post... hadn't meant to post on top of it. Key points are the same, though.

Elliott Hird

06-03-2006, 12:54 PM

Um, it isn't a div. It's a <center> tag.

WebJoel

06-03-2006, 01:00 PM

Um, it isn't a div. It's a <center> tag.
"<center>" is deprecated ("old, out-of-date"). Applying "margin:0 auto" centers a DIV or whatever, with "zero" pixels at the top edge. -Better than using "center" which, apart from being old, only 'centers' left-to-right.

ray326

06-03-2006, 01:02 PM

Remove the center tag entirely. The text-align in the body does the same job correctly.

Elliott Hird

06-03-2006, 01:05 PM

"<center>" is deprecated ("old, out-of-date"). Applying "margin:0 auto" centers a DIV or whatever, with "zero" pixels at the top edge. -Better than using "center" which, apart from being old, only 'centers' left-to-right.
Tried that before. Didn't work.

Believe me, I know that. I'm normally XHTML1.1+CSS2 only, but this is an old project I'm picking up again.

GaryS

06-03-2006, 03:29 PM

Hi - I'm back

Give this a go - it includes mcuh of the stuff the others have been saying:

<body>
<div id="wrapper">
<div id="user">Logged in as sdf. <a href="?action=login">Logout</a></div>

<h1>It's pretty obvious...</h1>
<h2>...that the actual game is under construction.</h2>



<div style="text-align:center; width: 100%">

<div style="width: 90%;margin:0 auto; border:1px solid red">

<table class="block" style="width:39%">
<tr>
<th colspan="2" class="header">STATS</th>
</tr>

<tr>
<th>HP</th>
<td>100/100</td>
</tr>
<tr>
<th>STR</th>
<td>5</td>

</tr>
<tr>
<th>INT</th>
<td>5</td>
</tr>
<tr>
<th>LUK</th>

<td>5</td>
</tr>
</table>
<table class="block">
<tr>
<th class="header">LOCATION</th>
</tr>
<tr>

<td>
<p>Blah blah blah</p>
</td>
</tr>
</table>
<table class="block">
<tr>
<th class="header">USER INFO</th>

</tr>
<tr>
<td>
<p>You registered 3rd June 2006 12:29 PM.</p>
</td>
</tr>
</table>

<div id="dummy"></div>
</div>

</div>



<div id="dummy"></div>
</div>
</body>

As I said earlier, you could make your life easier by putting your three columns into a table. The following needs work but might be the quickest route to something that looks right across a range of browsers:

<body>
<div id="wrapper">
<div id="user">Logged in as sdf. <a href="?action=login">Logout</a></div>

<h1>It's pretty obvious...</h1>
<h2>...that the actual game is under construction.</h2>



<div style="text-align:center; width: 100%">

<table style="width: 90%;margin:0 auto; border:1px solid red">
<tr>
<td style="width:30%">

<table>
<tr>
<th colspan="2" class="header">STATS</th>
</tr>

<tr>
<th>HP</th>
<td>100/100</td>
</tr>
<tr>
<th>STR</th>
<td>5</td>

</tr>
<tr>
<th>INT</th>
<td>5</td>
</tr>
<tr>
<th>LUK</th>

<td>5</td>
</tr>
</table>
</td>
<td style="width:30%">

<table >
<tr>
<th class="header">LOCATION</th>
</tr>
<tr>

<td>
<p>Blah blah blah</p>
</td>
</tr>
</table>

</td>
<td style="width:30%">

<table >
<tr>
<th class="header">USER INFO</th>

</tr>
<tr>
<td>
<p>You registered 3rd June 2006 12:29 PM.</p>
</td>
</tr>
</table>

</td>
</tr>
</table>

</div>



<div id="dummy"></div>
</div>
</body>

Elliott Hird

06-03-2006, 03:54 PM

I'll have a go at both, thanks.

(For the record, IE compatibility is NOT an issue.)