Forum PHP.pl > [HTML][CSS] div się powiększa wraz z zawartością

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] div się powiększa wraz z zawartością

patryk9200

21.07.2009, 19:03:51

cześć,
Zrobiłem nowy layout na stronę i mam z nim problem.
Kod html:

[HTML] op.jpg);
    height: 25px;
    text-align: left;    
}
 
#left {
background: brown;
margin-bottom:-1000px;
padding-bottom:1000px;
height: 100%;
text-align: left;
    width: 200px;
    float: left;
}
 
#right {
background: yellow;
margin-bottom:-1000px;
padding-bottom:1000px;
height: auto;
    width: 820px;
    float: left;
    overflow: hidden;
}
chodzi o to, że prubuję zrobić tak:
minimalna wysokość strony to 1000px (div left, right) oraz tak zeby te 2 divy zawsze miały tą samą wysokość z czego div right dopasowywał by się do zawartości....

[/list][HTML] 
 
  sadistic_son
  21.07.2009, 20:03:33 
 
 
  Musisz diva left i right umiescic w jeszcze jednym divie. To bedzie tak:
[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<link href="index.css" rel="stylesheet" type="text/css" >
 
</head>
<body>
<div id="all">
<div id="logo">
ff
</div>
<div id="topmenu">
 
 
</div>
<div id="content">
<div id="left">
iuuyh<br>
<br>
kjhvkv
</div>
<div id="right">
hkjhkj<br>hyghghhkj
</div>
</div>
 
</div>
</body>
</html>
[HTML] pobierz, plaintext 

I CSS do tego:
Kod
body {
background: #f9f9f9;
}

#all {
margin: 0 auto;
width: 1020px;

}

#logo {
height: 30px;
background: blue;
}

#topmenu {
background: green;
background-image: url(img/menu_nav_top.jpg);
height: 25px;
text-align: left;
}

#left {
background: brown;
margin:0;
padding:0;
text-align: left;
width: 200px;
float: left;
height:100%;
min-height:1000px;
}

#right {
background: yellow;
margin:0;
padding:0;
width: 820px;
overflow: hidden;
height:100%;
min-height:1000px;
}

#content{
min-height:1000px;
background: brown;
height:100%;
}


EDIT: Poprawka. Teraz będzie działało! Właściwie to jest to takie mini-oszustwo bo dev levy w rzeczywistości nie będzie przybierał wysokości prawego ale wypełnieniem pod nim będzie div id="content". Jeśli z kolei lewy div ma zawierać wiecej tekstu niż prawy to wystarczy zmienic background z content na taki jaki ma div prawy i jest ok. 
 

 
  singles
  21.07.2009, 20:07:09 
 
 
  Divy i kolumny równej wysokości: http://buildinternet.com/2009/07/four-meth...height-columns/

BTW. Trochę namieszałeś z tym layoutem: jakieś margin -1000px, padding 1000px - po co takie cyrki ?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.