Div-tags - stå ved siden af hinanden
Hej derude!Jeg har søgt, efter det her problem, og det er sikkert her på siden et sted, men kan ikke finde noget, som jeg kan kæde sammen med mit problem :)
Jeg sidder pt. og arbejder med et design, men synes ikke at kunne få mine div-tags til at se ud som jeg vil have dem.
Min kode er lidt lang, men ser således ud:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#Global{
width:1024px;
margin: 0 auto;
}
#header{
width: 1024px;
height: 119px;
margin: 0 auto;
}
#header_back{
background-image:url(images/index_02.gif);
height: 119px;
width: 754px;
float:right;
}
#logo {
width: 270px;
height: 119px;
float:left;
}
#menu {
background-image:url(images/index_03.gif);
height: 23px;
width: 994px;
padding-left:30px;
padding-top: 3px;
}
#newsbar{
background-image:url(images/index_04.gif);
height: 23px;
}
.klassetrin{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 24pt;
margin-top: 7px;
margin-left: 30px;
color:#333333;
}
.box_line{
position:static;
}
.box_left{
float:left;
width: 480px;
margin-left: 30px;
margin-top: 4px;
}
.box_right{
float:right;
width: 480px;
margin-right: 30px;
margin-top: 4px;
}
.box_top{
width: 480px;
height: 24px;
background-image:url(images/index_09.gif);
}
.box_con{
width: 480px;
height:100%;
background-image:url(images/index_12.gif);
}
.box_bot{
width: 480px;
height: 23px;
background-image:url(images/index_14.gif);
}
</style>
</head>
<body style ="background-color:#ceeeff;">
<div id="Global">
<div id="header">
<div id="logo"><img src="images/index_01.gif" /></div>
<div id="header_back"></div>
</div>
<div id="menu"></div>
<div id="newsbar"></div>
<!-- Her fra starter hovedindholdet-->
<div id="main_con">
<div class="klassetrin">1. - 3. Klassetrin</div>
<div class="box_line">
<div class="box_left">
<div class="box_top">Hej med dig</div>
<div class="box_con">
Hej igen!<br/>Går det godt derude?<br/>Jeg <br/>ville<br/>bare<br/>lige<br/>høre!
</div>
<div class="box_bot"></div>
</div>
<div class="box_right">
<div class="box_top">Hej med dig</div>
<div class="box_con">
Hej igen!<br/>Går det godt derude?<br/>Jeg <br/>ville<br/>bare<br/>lige<br/>høre!<br/>hvis<br/>det er ok?<br/>Dette er en test..
</div>
<div class="box_bot"></div>
</div>
<!-- Klassetrins skifter--->
<div class="klassetrin">4. - 6. Klassetrin</div>
<div class="box_line">
<div class="box_left">
<div class="box_top">Hej med dig</div>
<div class="box_con">Hej igen</div>
<div class="box_bot"></div>
</div>
<div class="box_right">
<div class="box_top">Hej med dig</div>
<div class="box_con">Hej igen</div>
<div class="box_bot"></div>
</div>
</div>
<!-- Hovedindholdet slutter her -->
</div>
</body>
</html>
Og resultatet her: http://www.teet.dk/mat/
Mit problem er at div-tags skal være ved siden af hinanden inden for de forskellige klasse trin. Det kommer nemlig problemer, hvis boxene indeholder forskellige antal linjer tekst. De bliver forkudt i forhold til hinaden.
Jeg håber i forstår hvad jeg leder efter, eller skal jeg prøver og illustrere det :)
Mvh.
Cot
