A
Aaron Reimann
Thank you in advance for ANY suggestions. If there were a alt.html.css
I would have posted this there, sorry if this is the wrong location for
the post.
Here is the page:
http://www.reimanndesign.com/csstest/
Here is the GoLive preview (and what I want it to look like:
http://www.reimanndesign.com/csstest/golive_preview.jpg
Here is a screen capture look:
http://www.reimanndesign.com/csstest/browser.jpg
Here is my HTML and CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>index</title>
<style>
body { background: rgb(88,86,84); }
..mainBox {width:740px; height:auto; margin-left: auto; margin-right:
auto; background-color: rgb(255,255,255); background-image: none;
background-position: 0 0; top: 18px; border: solid thin rgb(0,0,0);
outline-color: black; }
..mainBoxTop {width:740px; height:75px; background: rgb(136,59,25); }
..mainBoxMid {width:100%; height: auto;
background-color:rgb(170,167,160); }
.mainBoxMidLeft {width:134px; height:auto;
background-color:rgb(170,167,160); float:left; }
.mainBoxMidRight {width:153px; height:auto;
background-color:rgb(170,167,160); float:right; }
.mainBoxMidRight p { margin-left: 8px; margin-right:
8px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size: 10px }
.mainBoxMidMid {width:453px; height:auto; float:left;
background-color:rgb(255,255,255) }
.mainBoxMidMid p { margin-left: 8px; margin-right: 8px;
font-family:
Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size: 11px
}
..mainBoxBot { background: rgb(136,59,25); width:740px; height:60px; }
.mainBoxBot p { color: rgb(255,255,255); font-family:
Helvetica,
Geneva, Arial, SunSans-Regular, sans-serif; font-size: 10px; margin: 0
8px; }
</style>
</head>
<body>
<div class="mainBox">
<div class="mainBoxTop">
<!-- <img src="images/mainBoxTop_01_logo.gif" alt=""
height="75"
width="585" border="0" /> -->
</div>
<div class="mainBoxMid">
<div class="mainBoxMidLeft">
d
</div>
<div class="mainBoxMidRight">
<p>d</p>
</div>
<div class="mainBoxMidMid">
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
</div>
</div>
<div class="mainBoxBot">
<br />
<div align="center">
<p>mainBoxBot</p>
</div>
</div>
</div>
</body>
</html>
--------
Hopefully the info above will give you an idea of my problem.
Basically, I don't know why (probably because I'm new to CSS) the boxes
are not "growing" with the page. Can anyone help me out?
Thank you,
aaron
I would have posted this there, sorry if this is the wrong location for
the post.
Here is the page:
http://www.reimanndesign.com/csstest/
Here is the GoLive preview (and what I want it to look like:
http://www.reimanndesign.com/csstest/golive_preview.jpg
Here is a screen capture look:
http://www.reimanndesign.com/csstest/browser.jpg
Here is my HTML and CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>index</title>
<style>
body { background: rgb(88,86,84); }
..mainBox {width:740px; height:auto; margin-left: auto; margin-right:
auto; background-color: rgb(255,255,255); background-image: none;
background-position: 0 0; top: 18px; border: solid thin rgb(0,0,0);
outline-color: black; }
..mainBoxTop {width:740px; height:75px; background: rgb(136,59,25); }
..mainBoxMid {width:100%; height: auto;
background-color:rgb(170,167,160); }
.mainBoxMidLeft {width:134px; height:auto;
background-color:rgb(170,167,160); float:left; }
.mainBoxMidRight {width:153px; height:auto;
background-color:rgb(170,167,160); float:right; }
.mainBoxMidRight p { margin-left: 8px; margin-right:
8px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size: 10px }
.mainBoxMidMid {width:453px; height:auto; float:left;
background-color:rgb(255,255,255) }
.mainBoxMidMid p { margin-left: 8px; margin-right: 8px;
font-family:
Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size: 11px
}
..mainBoxBot { background: rgb(136,59,25); width:740px; height:60px; }
.mainBoxBot p { color: rgb(255,255,255); font-family:
Helvetica,
Geneva, Arial, SunSans-Regular, sans-serif; font-size: 10px; margin: 0
8px; }
</style>
</head>
<body>
<div class="mainBox">
<div class="mainBoxTop">
<!-- <img src="images/mainBoxTop_01_logo.gif" alt=""
height="75"
width="585" border="0" /> -->
</div>
<div class="mainBoxMid">
<div class="mainBoxMidLeft">
d
</div>
<div class="mainBoxMidRight">
<p>d</p>
</div>
<div class="mainBoxMidMid">
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
<p>a;lsdjf;asjdf;laskdfj</p>
</div>
</div>
<div class="mainBoxBot">
<br />
<div align="center">
<p>mainBoxBot</p>
</div>
</div>
</div>
</body>
</html>
--------
Hopefully the info above will give you an idea of my problem.
Basically, I don't know why (probably because I'm new to CSS) the boxes
are not "growing" with the page. Can anyone help me out?
Thank you,
aaron