body/div width

lswing · Joined: 07 Nov 2008 Posts: 2

Created first web page using CSS and have a couple of questions. It's a very simple site but not sure if I've gone overboard with widths.
Have body, three div's, and a table and other enters and wondering in which one I need to set page widths?

Code starts with;
<body>
<div class="1"> (to set outer border)
<div class="2"> (to set 2nd inner border and page width)
(Wanted a double border with different colors and two divs is the only way I could figure it out.)

<p> blah blah </P>
<table>
etc
etc
etc
</table>
<div> blah blah </div>

</div>
</div>
</body>
</html>

I have set a width in body, div, div1, div2, and table. Do I need to do this or just set one width?
I've set all widths the same as div2. Div1 is slightly larger to get a double colored border.
I'd like a width that will fill the screen of a 17" monitor set at 800x600px, ~760px.

Suggestions please,

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1417 Location: Biloxi, MS

You could set a border for the body tag, then set a border for the page width (wrapper div):

Play with this and modify as needed:

lswing · Joined: 07 Nov 2008 Posts: 2

Here's my CSS. Main question is do I need as many "widths" as I have below in different entries?
Will play with border also.
1st shot at css. Still building web site(www.ofallonmohistory.org) and css. We're justa bunch of volunteers. Smile

li.p {
margin: 0px 20px 0px 20px;
padding-bottom: 10px;
}
li.top{
margin: 0px 20px 0px 20px;
padding-bottom: 10px;
padding-top: 25px;
}
li {
margin: 0px 20px 0px 20px;
}
div.page {
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
width: 745px;
border: 10px solid #890D03;
}
div.page1 {margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
width: 735px;
border: 5px solid #C4112F;
}

tr {
padding: 0px;
border: 0px;
width: 735px;
}

div {
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
width: 735px;
}

body {
text-align: center;
margin: auto auto auto auto;
width: 745px;
background: #fff8dc;
padding: 0px 0px 0px 0px;
}

a:link {
color: #000fff;
}

a:visited {
color: #ff2400;
}

p {
margin-top: 0px;
Margin-right: 15px;
margin-left:15px;
margin-bottom:0px;
font-family: "Times New Roman",Times,serif;
font-size: 16px;
text-align: left;
}

table {
width: 745px;
font-family: "Times New Roman",Times,serif;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
td.left {
padding: 0px 0px 0px 0px;
text-align: left;
margin-left: 0px;
font-size: 30px;
vertical-align: top;
width: 200px;
}
td.center {
text-align: center;
font-size: 36px;
vertical-align:top;
padding-top: 25px;
}
td.right {
text-align: right;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-size:30px;
}

sticks464 · Joined: 31 Dec 2006 Posts: 1284

Here's how I would code this page (Home page) using pure css and no tables.
Tested in IE6, IE7, FF3, Safari and Opera.

css