1 reply [Last post]
mumford
Offline
Enthusiast
Last seen: 11 years 44 weeks ago
Joined: 2003-07-22
Posts: 57
Points: 0

Hi

I have a slight problem, with a 2 column layout i have created in IE5.

http://www.omegadm.co.uk/index_new.htm

The main content border dosen't butt up to the right content top border.

Also the box where it says welcome dosen't butt up to the main wrapper border.

Could someone please look at my code and see what i am doing wrong, and maybe point out other glitches i may have.

Any help much appreicated.

Heres the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<LINK rel="stylesheet" href="app_stylesheet_new.css" type="text/css" />
</head>

<div align="center">
<div id="wrapper">
<div id="header"><p>Logo</p></div>
<div id="titleblock">
<div id="taglinebox"></div>
<div id="headerimages"></div>
<div id="titlebox">welcome</div>
</div>
<div id="navbar"></div>


<div id="rightcontent"><p>right</p></div>
<div id="maincontent"><p>Main</p></div>


<div id="footer" align="center"></div>
</div>
</div>

</html>

and the CSS.....

/* ====================================================================
Elements
-------------------------------------------------------------------- */
body{
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:0;
background-color:#fff;
text-align:center;
}
p{
padding: 0 0 0 10px;
margin-top:0px;
margin-bottom:0px;
font:11px/18px Verdana, Arial, Helvetica, Geneva, sans-serif;
}

/* ====================================================================
Classes
-------------------------------------------------------------------- */
#wrapper{
width:760px;
text-align:left;
border:1px solid #000000;
voice-family: "\"}\"";
voice-family: inherit;
width:758px;
}
/*for Opera*/
html > body #wrapper{
width:758px;
}
#header{
height:70px;
width:758px;
background:#fff;
color: #000;
border-top:7px solid #676752;
}
#titleblock {
height:117px;
background-color:#000;
border-bottom:1px solid #fff;
color: #fff;
}
#navbar {
height:21px;
background-color:#000;
width:758px;
}
#rightcontent {
float:right;
background-color:#fff;
width:111px;
border-top:1px solid #000;
text-align:right;
}
#maincontent {
float:left;
width:646px;
background-color:#ffffff;
border-right:1px solid #000;
}
#titlebox {
float:left;
width:111px;
height:117px;
background-color:#D9D9D1;
border-left:1px solid #fff;
font:bold 16px Trebuchet MS, Verdana, Arial, Helvetica, Geneva, sans-serif;
text-align:center;
color:#676752;
}
#taglinebox {
float:left;
width:172px;
height:117px;
background-color:#676752;
border-right:1px solid #fff;
}
#headerimages {
float:left;
width:473px;
height:117px;
background-color:#676752;
}
#footer {
height:25px;
width:758px;
background-color:#fff;
color: #333333;
border:1px solid black;
border-width:1px 0 0 0;
margin:0;
}

sam_healy
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-08-07
Posts: 5
Points: 0

Suggestion

Why not put a border-left on the right container instead of a border-right on the main container?

- Sam.