float:left på diven de ligger i också... ?
Frågan#1
Hallå,
har fått mig ett problem som jag sitter o sliter mitt hår framför.
Jag har två divvar som jag vill ha bredvid varandra i en annan div, men när jag lägger en float: left på dessa divvar så vill inte bakgrundsdivven ligga bakom hela de två andra...
Ni kan se problemet här:
http://adarkmind.net/test/
Se bilden så förstår ni vad jag menar.
css:
/* CSS Document */
<!--
body {
background-color: #8b8b8b;
margin-left: 20px;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
div.top {
background-color: #666666;
font-weight: bold;
padding: 4px;
}
div.bottom {
background-color: #cccccc;
padding: 4px;
border: #666666 1px solid;
}
div.bottom div {
padding: 4px;
border: #666666 1px solid;
float: left;
}
table.border {
border: #666666 1px solid;
}
td {
padding: 4px 10px 4px 4px;
font-size: 0.8em;
}
-->
html:
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
<link rel="SHORTCUT ICON" href="Pics/icosbird.ico" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
</head>
<body>
<div id="main">
<div>
<div class="top">
Text.
</div>
<div class="bottom">
<div>
<table cellspacing="0" class="border">
<tr bgcolor="#666666">
<td colspan="4">text</td>
</tr>
<tr bgcolor="#666666">
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr bgcolor="#cccccc" onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#cccccc'" >
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr bgcolor="#999999" onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#999999'" >
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
<div>
<table cellspacing="0" class="border">
<tr bgcolor="#666666">
<td colspan="4">text</td>
</tr>
<tr bgcolor="#666666">
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr bgcolor="#cccccc" onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#cccccc'" >
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr bgcolor="#999999" onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#999999'" >
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
/red Glömde koden...
