problems formatting content

spinner903 · Post by **spinner903** » Wed 29. Jun 2005, 07:00

http://www.slonewman.org/test/

I'm having some problems centering all of the information on the page to fit it well on the page. Take a look and you'll see what I mean. Any help is appreciated. I'm trying not to use tables so if you have CSS suggestions all the better.

Main content:

<body>

<div id="wrapper">

<div id="header"><p class="access"><a href="#maincontent">Skip navigation</a></p></div>

<div id="globalnav"><ul id="menu"><img src="/test/content/images/header.jpg" /></ul></div>
<div id="sidebar">{NAV_TABLE_COLUMN}</div>
<div id="maincontent">{BREADCRUMB}<br>{CONTENT}</div>

</div>
</body>

CSS: (at least the important stuff)

html {
min-width: 742px;
}

/* Helpers and base rules */

img {
border: 0;
}

p.access {
display: none;
}

img.counter {
display: inline;
margin-left: 5px;
}

/* Primary layout divisions */

body {
text-align: center;
margin: 0;
padding: 0;
border: 0;
background: #93AAC1 url(/test/content/images/wrapinner.gif) top center repeat-y;
color: #663;
font: small/18px Verdana, Helvetica, sans-serif;
}

div#wrapper {
color: #663;
background: url(/test/content/images/wrapinner.jpg) repeat-y left top;
width: 742px;
margin: 0 auto;
padding: 0;
text-align: left;
height: 100%;
}

div#sidebar {
margin: 0 0 0 20px;
width: 130px;
border: 0;
padding-top: 160px;
float: left;
}

div#maincontent {
width: 440px;
padding: 170px 130px 0 0;
border: 0;
float: right;
}

div#globalnav {
height: 0px;
width: 700px;
margin: 0 0 0 12px;
padding: 0;
border: 0;

top: 0px;
text-align: center;
vertical-align: top;
}

div#globalnav ul#menu {
height: 30px;
width: 700px;
margin: 0;
padding: 0;
position: relative;
}

div#globalnav ul#menu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

ul#menu li, ul#menu a {
height: 30px;
display: block;
}

div#globalnav ul#menu li a {
text-indent: -9999px;
text-decoration: none;
}