3 svar · 512 visningar · startad av Hampan90
Har lite problem med float och lite höjdanvisningar i min kod.
<div id="container">
<div id="left_bar"></div>
<div id="middle"></div>
<div id="right_bar"></div>
</div>
#container{
width: 560px;
height: 500px;
background-color:#CCCCCC;
}
#left_bar{
width: 15px;
height: 100%;
float: left;
display:inline;
background-image:url(images/site/left_bar_bg.jpg);
}
#middle{
width: 530px;
height: 100%;
float: left;
display:inline;
background-color:#999999;
}
#right_bar{
width: 15px;
height: 100%;
float: right;
display:inline;
background-image:url(images/site/right_bar_bg.jpg);
}
Jag har omslutet alla divar med en div som het container, i den diven så finns det 3 divar som alltså då bildar 3 kolumner med float.
Div 1 är en dokorationsbar
Div 2 är där innhållet ska stå sen
Div 3 är en dekorationsbar
Jag har gjort så att Div 1 Och Div 3 ska vara samma höjd som containern (100%)
Sen har jag just nu gjort så att Div 2 också ska ha samma höjd som containern, men detta är bara temporärt.
Nu kommer problemet:
Jag vill nu släppa heighten på containern så att Div 2 (middle) styr höjden över den.
Då borde jag ju kunna ta bort höjden helt på containern och sedan sätta en fast höjd på Div 2 (middle).
Men då skiter sig hela designen!
Varför?
1. Behövder du verkligen två div:ar för dekoration? Kan dessa inte ligga med i bakgrundsbilden i containern, eftersom du ändå har fast bredd på #middle.
2. Du måste clear:a din container. <br style="clear:both;"> efter din rightbar och innan du avslutar containern.
1: Det har du rätt i, men det blir ju längre nedladdningstid eftersom att det blir en stor bild istället för 3 mindre.
2: Ok, men det hjälpte inte
Har nu exakt samma problem.
En sajt som är uppbyggd med flera små rutor.
Såhär ser principen ut för mig kod:
<!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>
<title> new document </title>
<style type="text/css">
div#container {
height: 250px;
}
div#left_cont {
float: left;
width: 18px;
height: 100%;
border: 1px #000 solid;
}
div#upper_left {
float: left;
width: 18px;
height: 18px;
border: 1px #000 solid;
}
div#upper_middle {
float: left;
width: 198px;
height: 18px;
border: 1px #000 solid;
}
div#upper_right {
float: left;
width: 18px;
height: 18px;
border: 1px #000 solid;
}
div#middle_cont {
float: left;
width: 198px;
border: 1px #000 solid;
}
div#right_cont {
float: left;
width: 18px;
height: 100%;
border: 1px #000 solid;
}
div.clear-it {
clear: both;
height: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="upper_left"> </div>
<div id="upper_middle"> </div>
<div id="upper_right"> </div>
<div class="clear-it"> </div>
<div id="left_cont"> </div>
<div id="middle_cont">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="right_cont"> </div>
<div class="clear-it"> </div>
<div id="upper_left"> </div>
<div id="upper_middle"> </div>
<div id="upper_right"> </div>
<div class="clear-it"> </div>
</div>
</body>
</html>
I nuläget har div#container fast höjd, men jag måste ha en lösning där den här "rutan" ska kunna växa både på bredden och höjden.
Finns det en sådan lösning, eller är det tabeller som gäller här?
Tack!