Hvorfor er de 2 divs ikke på samme linie?
Nedenunder har jeg kode for min lille testsite.Jeg er ved at lave 2 menuer. En vandret og en lodret.
De 2 menuer skal være ovre i venstre side af den omkransende div-boks.
Jeg har dog et problem med at den vandrette menu og den røde box skal stå på samme linie.
Jeg skulle mene de burde stå på samme linie nu, men det er IE åbenbart ikke enig i.
Så jeg håbede nogle evt. ville hjælpe mig med at få de 2 bokse til at stå på samme linie istedet for under hinanden.
Med venlig hilsen...
ul#mainmenu
{
list-style-type: none;
margin: 0;
padding: .5em 0;
width:100px;
}
ul#mainmenu li a
{
display: block;
width: 100%;
color: #FFF;
background: #55C2F0;
font-size:11px;
font-weight:bold;
font-family: Tahoma, sans-serif;
border:1px solid #6B92B4;
padding-left:2px;
padding-right:5px;
padding-top:.9em;
padding-bottom:.4em;
border:1px solid #6B92B4;
text-align: left;
text-decoration: none;
margin:1px;
}
ul#mainmenu li a:hover
{
color: #FFF;
background: #FFC400;
}
ul#submenu
{
list-style-type: none;
margin: 0;
padding: .5em 0;
width:500px;
}
ul#submenu li a
{
display: block;
color: #FFF;
background: #55C2F0;
font-size:11px;
font-weight:bold;
font-family: Tahoma, sans-serif;
padding: .1em 0;
text-align: center;
text-decoration: none;
margin:1px;
border:1px solid #6B92B4;
}
body{background-color:#F1F1F1;}
ul#submenu li a:hover
{
color: #FFF;
background: #FFC400;
}
.left { float: left; }
.right { float: right; }
//////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link TYPE="text/css" HREF="./styles/weblayout.css" REL="stylesheet" TITLE="style">
<title>en titel</title>
</head>
<body>
<div style="position:relative;text-align: left; width: 800px; margin-left: auto; margin-right: auto;background-color:#F1F1F1;BORDER:#d1d1d1 1px solid;">
<div style="float:left;width:246px; background-color:green;">
<ul id="submenu">
<li class="left"><a href="#">kundeinfo</a></li>
<li class="left"><a href="#">forbrugsinfo</a></li>
</ul>
</div>
<div style="float:right;width:550px;text-align:right;background-color:red;">paycards</div>
<div style="float:left;width:100px;">
<ul id="mainmenu">
<li><a href="#">point1</a></li>
<li><a href="#">point2</a></li>
</ul>
</div>
</div>
</body>
</html>
