Problemer med opsætning
Problemer med opsætningHej.
Jeg har et problem med en side jeg skal lave. Jeg skal lave en midtersektion med to rækker. Disse rækker er lavet i div'er og de er sat ind i en anden div for at holde dem sammen på midten.
Jeg vil gerne have at disse to er "auto" i højde, men når jeg sætter den div der omringer disse til "auto" i højden falder det fra hinanden.
Jeg ved ikke hvordan jeg får det til at virke, så håber der er nogen der vil hjælpe.
Min html ser sådan ud:
<body>
<div id="wrapper">
<div id="Top"><img src="Images/Logo.png" alt="" width="250" height="57" /></div>
<div id="country"><img src="Images/DK.png" width="31" height="31" /> <img src="Images/SE.png" width="31" height="31" /></div>
<div id="menu">
<div id="menu_left">
<div id="Menu_center">
<li><a href="#">Karrierer</a></li>
<li><a href="#">Ydelser</a></li>
<li><a href="#">Eshop</a></li>
<li><a href="#">Kontakt</a></li></div>
</div>
<div id="menu_right">
<label for="soeg"></label>
<input name="soeg" type="text" id="soeg" size="15" />
<a href="index.html"><img src="Images/Home.png" width="15" height="13" border="0" /></a> <img src="Images/Print.png" width="15" height="15" onclick="MM_callJS('window.print();')" /> <a href="Sitemap.html"><img src="Images/Sitemap.png" width="15" height="15" border="0" /></a> <a href="Kontakt.html"><img src="Images/Kontakt.png" width="15" height="15" border="0" /></a></div>
</div>
<div id="indhold">
<div id="indhold_left">
<li><a href="Historie.html"> Historie</a></li>
<li><a href="Jobs.html" >Karrierer</a></li>
<li><a href="Profil.html"> Profil</a></li>
<li><a href="Medarbejdertilfredshed.html">Medarbejder tilfredshed</a></li>
<li><a href="Hvem_er_vi.html">Hvem er vi?</a></li>
<li><a href="Hvorfor.html">Hvorfor</a></li>
<li><a href="Certificeringer.html">Certificeringer</a></li>
</div>
<div id="indhold_right">
<h1>Historie</h1>
</div>
</div>
<div id="bund">
<div id="Bundkollonne">
<h3>Kontakt </h3>
<p>Tlf +45 33 91 20 91<br />
Fax +45 33 91 20 99<br />
E-mail: info@datacompagniet.dk<br />
www.datacompagniet.dk</p>
</div>
<div id="Bundkollonne">
<h3>Service</h3>
<p> </p></div>
<div id="Bundkollonne">
<h3>Cases</h3>
<p> </p></div>
<div id="Bundkollonne_right"></div>
</div>
</div>
</body>
</html>
Og min css ser sådan ud:
@charset "UTF-8";
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin: 15px;
}
#wrapper {
margin: auto;
clear: both;
height: auto;
width: 970px;
}
#Top {
width: auto;
height: 57px;
padding: 10px;
margin-bottom: 5px;
}
#country {
width: auto;
text-align: right;
margin-bottom: 5px;
padding-right: 5px;
height: 31px;
}
#menu {
height: 40px;
background-image: url(../Images/Menu.png);
width: 970px;
}
#indhold {
height: 200px;
width: 970px;
}
#indhold_left {
float: left;
height: auto;
width: 180px;
padding-top: 20px;
background-color: #F6F6F6;
padding-bottom: 20px;
padding-left: 10px;
}
#indhold_right {
float: right;
height: auto;
width: 770px;
margin-top: 20px;
padding-left: 10px;
}
#Bundkollonne {
width: 217px;
margin-right: 20px;
float: left;
height: 150px;
padding-left: 10px;
}
#bund {
height: 150px;
width: 970px;
}
#Bundkollonne_right {
float: right;
height: 150px;
width: 217px;
padding-left: 10px;
}
h3 {
font-size: 12px;
color: #F37021;
}
h1 {
font-size: 16px;
}
#menu_right {
float: right;
height: 32px;
width: 200px;
margin-left: 10px;
margin-top: 8px;
}
#menu_left {
float: left;
height: 40px;
width: 750px;
margin-left: 10px;
}
#Menu_center {
list-style-type: none;
margin: auto;
height: 40px;
width: 970px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
#Menu_center li {
display: inline;
margin: 0px;
float: left;
height: 27px;
}
#Menu_center a {
font-weight: bold;
text-decoration: none;
display: block;
padding-top: 13px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-size: 12px;
color: #FFF;
height: 27px;
}
#Menu_center a:hover {
color: #ffffff;
text-decoration: none;
height: 27px;
padding-top: 13px;
background-image: url(../Images/Menu_over.jpg);
background-repeat: repeat-x;
}
#indhold_left li {
line-height: 1.5em;
color: #F37121;
text-decoration: none;
list-style-type: none;
}
