One Column Layout Question

Forum Moderators: not2easy

Message Too Old, No Replies

One Column Layout Question

Fixed margins, % width

guiroo

3:54 pm on Nov 17, 2003 (gmt 0)

Okay this seems like an easy thing but it's driving me crazy.

I need a 1 column div that is 100% of the page but with fixed a 20px gutter. I say gutter because it could be created with position, margin or padding — I don't care.

Here's the kicker. I need to be able to put a table with a 100% width in the div without it adding a horizontal scroll bar to the browser.

Seems simple enough, what am I missing? Thx!

guiroo

5:32 pm on Nov 17, 2003 (gmt 0)

Side note: This is with the "DocType" specified. If I take it out then it's no problem. But I'd rather keep the doc type specified. Thx!

DrDoc

6:49 pm on Nov 17, 2003 (gmt 0)

Are you specifying width:100% for the div? If so, remove that... The div, being a block level element, will automatically fill the full width of the page (with or without margins/paddings etc).

guiroo

8:11 pm on Nov 17, 2003 (gmt 0)

Thx, I removed the 100% width from everything in the css, leaving it only in the table tag in the html. Still no worky.

Looks like it's only an issue in IE 6. (I'm beginning to take their antics personally.) Anybody got any solutions? I have to have a body margin of 0 in prep for a header while the content has to have a 20px gutter.

Going for complete basics, here is all there is:

CSS:

body { margin: 0px; padding: 0px; }
div#summary { position: absolute; left: 20px; right: 20px; }

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Assets/Styles/simple6.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="summary">
<h1>Page Title</h1>
<p>asdfasdf asdf asdf asdf asdf asdf asdf asdf asdfkj hasdkf aksjdf asdjfh kasjdfh kjasdfh asdfasdf asdf asdf asdf asdf asdf asdf asdf asdfkj hasdkf aksjdf asdjfh kasjdfh kjasdfh.</p>

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<th width="50%" scope="row">Table Header:</th>
<td width="50%">Table Data</td>
</tr>
</table>

<p>asdfasdf asdf asdf asdf asdf asdf asdf asdf asdfkj hasdkf aksjdf asdjfh kasjdfh kjasdfh asdfasdf asdf asdf asdf asdf asdf asdf asdf asdfkj hasdkf aksjdf asdjfh kasjdfh kjasdfh asdfasdf asdf asdf asdf asdf asdf asdf asdf asdfkj hasdkf aksjdf asdjfh kasjdfh</p>
</div>
</body>
</html>

SuzyUK

8:33 pm on Nov 17, 2003 (gmt 0)

body { margin: 0; padding: 0; }
div#summary { margin: 20px; }

Then position the header absolutely.... at top: 0; left: 0;

Suzy

guiroo

9:32 pm on Nov 17, 2003 (gmt 0)

Right but now it blows up in IE 5.5 - even when I change it from margin to padding.

Blows up = adds a horizontal scroll bar.

Ideas? Fixes?

SuzyUK

10:03 pm on Nov 17, 2003 (gmt 0)

YE ol' Box Model again! ;)

try this...

html {margin: 0; padding: 0; }
body {margin: 20px; padding: 0;}
div#summary { margin: 0; width: 100%;}

Suzy

guiroo

10:58 pm on Nov 17, 2003 (gmt 0)

wOOt!

I had thrown out the box model fix due to the % requirement.

I went with the other less desirable solution of creating two divs that contain different information - but in this case the only solution that works under the requirements.

Thx folks!