StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to center div block of unknown width?
text
Body
copied!<p>I am working on removing tables from my site, and just learning the div tricks involved. My <a href="http://r0k.us/rock/games/CoH/HallsOfHeroes/" rel="nofollow">home page</a> currently has a centered table nested in another table. Removing the outer table was a bit tricky for someone just learning non-table methods, but it's done.</p> <p>My problem is, the inner table is super-easy to center ("margin:0 auto" in the CSS), but its <a href="http://r0k.us/rock/junk/HoH_DivVsTable.png" rel="nofollow">div equivalent</a> is not. The div will center if I specify an absolute width (such as 640px), but since I'm designing with the user's font size (not something I specify), I don't know how wide it will actually be for a given user.</p> <p>I've simplified the home page and have it online (<a href="http://r0k.us/rock/games/CoH/HallsOfHeroes/test.html" rel="nofollow">test.html</a> and <a href="http://r0k.us/rock/games/CoH/HallsOfHeroes/HoH.css" rel="nofollow">HoH.css</a> Here is an overview <a href="http://r0k.us/rock/junk/HoH_HPproblem.jpg" rel="nofollow">image</a> of test.html.</p> <p>Sorry for all the links. But with a floaty thing inside another floaty thing, I don't know what is relevant. The file test.html contains 63 lines of formatted HTML. The 640px hr is there for reference only; it will not be part of the final page.</p> <p>PS: I'm removing the tables because when I asked for site reviews, the first comment almost everyone had was, "get rid of the damn tables".</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload