Forum Moderators: not2easy
Reading and trying different positioning hasn't helped . . . for some reason I don't want to absolutely position everything. Any ideas?
Here's the css:
body {
margin: 0;
padding: 0;
}
#contain {
position: relative;
width: 100%;
}
/* layout
--------------*/
#top {
height: 100px;
width: 100%;
background-color: #898741;
}
#bkgrnd1 {
height: 300px;
width: 100%;
background-image: url(images/colorsb.jpg);
}
#box4 {
height: 116px;
width: 413px;
background-color: #676900;
float: left;
}
#btm {
height: 200px;
width: 100%;
background-color: #898741;
}
#homemain {
position: absolute;
top: 45px;
left: 413px;
width: 373px;
height: 471px;
background-color: #e9b97f;
border: 1px solid #FFFFFF;
}
/* text
--------------*/
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .8em;
line-height: 1.4em;
}
.homelink1 {
margin-top: 70px;
margin-left: 200px;
color: #fff;
}
.homelink2 {
margin-top: 120px;
margin-left: 437px;
color: #fff;
}
#homemain p {
margin: 24px 24px 12px;
}and the html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design2css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain">
<div id="top">
<p class="homelink1">expertise ¦ past work ¦ bio </p>
</div>
<div id="bkgrnd1"> </div>
<div id="box4"> </div>
<div id="btm">
<p class="homelink2"> about ¦ partners ¦ contact </p>
</div>
<div id="homemain">
<p>markit strategies and PR is an integrated strategic marketing and public
relations firm serving a wide range of industries with marketing, communications,
business development, and media relations program development. We can assist
organizations with strategic market development, writing and establishing
productive relationships with the media.</p>
</div>
</div>
</body>
</html>
The large top margin on #homelinks2 is causing a large gap between the bottom of your content div and the text for those links in IE. I would remove it altogether. You'll also note that this gets rid of the small white gap between the bottom div and the others in FF.
A final note: the floated #box4 div does not extend behind the abs pos #homemain div, leaving a white space on the right side of the layout. Making #box4's width 100% solves this, if it's an unintentional result.
cEM
SO, the boxes fit well, but there is still a funny white space above the #bkgrnd1 div, that also affects #box4 in IE, not FF.
By the way, #box4 is intentional. It is empty now, but will have content on other pages, and I didn't want to show on the right side of the main content (#homemain) box.
Margins, paddings (set to 0), floating, display properties haven't had an effect. It's probably something obvious to you, but frequently the obvious escapes me. Your help is greatly appreciated!
the css:
body {
margin: 0;
padding: 0;
}
#contain {
position: relative;
width: 100%;
}
/* layout
--------------*/
#top {
height: 100px;
width: 100%;
background-color: #898741;
}
#bkgrnd1 {
height: 300px;
width: 100%;
background-image: url(images/colorsb.jpg);'
}
#box4 {
height: 116px;
width: 413px;
background-color: #676900;
float: left;
}
#btm {
height: 200px;
width: 100%;
background-color: #898741;
}
#homemain {
position: absolute;
top: 45px;
left: 413px;
width: 373px;
height: 471px;
background-color: #e9b97f;
border: 1px solid #FFFFFF;
}
/* text
--------------*/
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .8em;
line-height: 1.4em;
}
.homelink1 {
padding-top: 70px;
padding-left: 200px;
color: #fff;
}
#btmlinks p {
color: #fff;
}
#homemain p {
padding: 24px 24px 12px;
}and the html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design2css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain">
<div id="top">
<p class="homelink1">expertise ¦ past work ¦ bio </p>
</div>
<div id="bkgrnd1"> </div>
<div id="box4"> </div>
<div id="btm">
</div>
<div id="homemain">
<p>main content area</p>
</div>
</div>
</body>
</html>
