Zrobiłem małą stronę, w której centrum znajduje się ramka z treścią i chciałbym zrobić tak aby część elementów strony dopasowywała się do jej wysokości automatycznie. Jak to zrobić?
Oto mój kod css:
CODE
p { margin-left: 30px; }
a:link {color: black;}
a:visited {color: black;}
a:hover {color: red;}
a:active {cecha: gray;}
a img{border:0;}
html, body {
text-align: center;
margin: 0;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#iframecenter {
height: 895;
width: 475;
border: 0;
}
#logowanie{
height: 895;
width: 475;
frameborder: 0;
}
#menuadmin {
height: 100;
text-align: left;
color: blue;
}
#center {
height: 900px;
width: 780px;
margin-left: auto;
margin-right: auto;
height: 1000px;
}
#LOGO {
height: 150px;
}
#NAGLOWEK {
background-image: url(img/menu_nav_top.jpg);
background-color: #888;
height: 25px;
text-align: left;
}
#MENUL {
height: 900px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#MENUBELKA{
background-image: url(img/menu_nav_top.jpg);
height: 25px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#MENUODSTEP{
height: 5px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#INFORMACJE {
height: 900px;
width: 150px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
height: 900px;
width: 480px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}
a:link {color: black;}
a:visited {color: black;}
a:hover {color: red;}
a:active {cecha: gray;}
a img{border:0;}
html, body {
text-align: center;
margin: 0;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#iframecenter {
height: 895;
width: 475;
border: 0;
}
#logowanie{
height: 895;
width: 475;
frameborder: 0;
}
#menuadmin {
height: 100;
text-align: left;
color: blue;
}
#center {
height: 900px;
width: 780px;
margin-left: auto;
margin-right: auto;
height: 1000px;
}
#LOGO {
height: 150px;
}
#NAGLOWEK {
background-image: url(img/menu_nav_top.jpg);
background-color: #888;
height: 25px;
text-align: left;
}
#MENUL {
height: 900px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#MENUBELKA{
background-image: url(img/menu_nav_top.jpg);
height: 25px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#MENUODSTEP{
height: 5px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#INFORMACJE {
height: 900px;
width: 150px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
height: 900px;
width: 480px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}