Forum Moderators: not2easy
The problem is that the 'first row' (menus 1 & 2) are 1024 wide, but the '2nd row' (menu 3) is about 1130. What have I done wrong?
The test case can be seen at www.dvmvac.com/testsite/divtest3.html (If I've violated any forum rules by stating the URL - sorry!)
Just in case, the code is below (with any 'personal' stuff removed - I hope. (All the CSS Rules are 'internal' because the normal external style sheet is quite large.)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
background:#CCFFFF;
font:10pt "Comic Sans MS";
min-width:600px;
text-align:center;
}
.wrapper{
margin:0px;
padding:0px;
width:1024px;
background: #0066FF;
}
.whitetext {
color:#FFFFFF;
font-size:130%;
}
#block2left{
clear:none;
float:left;
text-align: left;
width: 49%;
font-weight: bold;
background-color: #0066FF;
height: 40px;
}
#block2right {
clear:none;
float:left;
text-align: left;
width: 49%;
font-weight: bold;
border-left: 1px solid #FFFFFF;
background-color: #0066FF;
height: 40px;
}
#blockmid {
font-weight: bold;
text-align: left;
float: left;
clear: none;
border-bottom: 3px double #FFFFFF;
width: 100%;
border-top: 1px solid #FFFFFF;
background-color: #0066FF;
padding-top: 2%;
padding-left: 10%;
padding-bottom: 2%;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<div id="block2left"><span class="whitetext">• CANINE <br></span> </div>
<div id="block2right"><span class="whitetext">• FELINE <br></span></div>
</div>
<!--end wrapper 1-->
<div class="wrapper">
<!--<div class="wrapper" style="width: 912px"> fixes the problem if used to replace the above-->
<div class="whitetext" id="blockmid">
• GENERAL QUESTIONS/CONCERNS</div>
</div>
<!--end wrapper 2-->
</body>
</html>
try itlike this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
font:10pt 'Comic Sans MS',sans-serif;
text-align:center;
}
.wrapper{
width:1024px;
height:40px;
background-color:#06f;
margin:auto;
}
.whitetext {
color:#fff;
font-size:130%;
}
#block2left{
width:512px;
line-height:40px;
float:left;
text-align:left;
font-weight:bold;}
#block2right {
width:511px;
line-height:40px;
float:left;
text-align:left;
font-weight: bold;
border-left:1px solid #fff;}
#blockmid {
line-height:40px;
font-weight: bold;
text-align:left;
border-top: 1px solid #fff;
border-bottom:3px double #fff;
padding-left:10%;
}</style>
</head>
<body><div class="wrapper">
<div id="block2left"><span class="whitetext">• CANINE</span></div>
<div id="block2right"><span class="whitetext">• FELINE</span></div></div><!--end wrapper 1-->
<div class="wrapper">
<div class="whitetext" id="blockmid">• GENERAL QUESTIONS/CONCERNS</div>
</div><!--end wrapper 2-->
</body>
</html>
birdbrain
No problem, you're welcome. ;)
