Witam serdecznie jako nowy użytkownik forum. Mam nieśmiertelny problem - chciałem aby div #nav miał 100% wysokości diva rodzica #bottom, który rozszerza się tak jak #content (te divy są na końcu kodu css). Oto 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" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="style.css" />
<title>Tytuł strony</title>
</head>
<body>
<div id="center">
<div id="logo">
<div id="menu">
</div>
</div>
<div id="offer">
<div id="offer-a">
<div><p>Box1</p></div>
<div><p>Box2</p></div>
<div><p>Box3</p></div>
</div>
</div>
<div id="bottom">
<div id="nav">
<h4>Lorem ipsum...</h4>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend, libero eget porta pulvinar, tellus elit consectetur nulla, in pretium elit nulla a nisl. Aliquam non dui lacus. Mauris pulvinar rhoncus velit, et blandit nibh pharetra viverra. Proin at lacinia ipsum. </p>
<p>Ut risus justo, mattis vel condimentum sit amet, varius vel ipsum. Etiam ligula est, pellentesque viverra egestas dapibus, ullamcorper eu lorem. Vivamus vel augue vel nunc vehicula dignissim non quis odio. Praesent hendrerit accumsan odio, in tincidunt elit ullamcorper nec. Donec hendrerit fermentum diam eget sagittis. Sed bibendum congue tempor. Mauris ac massa ante, non pulvinar tortor. Morbi quis varius turpis. </p>
<p>Donec tincidunt mollis turpis laoreet tempor. Maecenas malesuada blandit nunc blandit lobortis. Integer leo libero, elementum a congue nec, lacinia tempor tortor. Suspendisse arcu dolor, lobortis id auctor a, dapibus et nibh. Nulla vel lectus mi, rhoncus aliquam purus. Cras bibendum velit eu velit imperdiet ac lacinia felis congue. Nullam quam mauris, euismod non accumsan et, auctor a tellus. Suspendisse potenti. Maecenas augue velit, ornare quis congue in, facilisis sed odio. Donec malesuada, est id euismod rhoncus, justo felis imperdiet libero, vel malesuada nisl risus eget enim. Sed id eros eget arcu laoreet cursus vitae et tellus. Nunc pretium tempor aliquet.</p>
</div>
</div>
<div style="clear:both"> </div>
</div>
</body>
</html>
i CSS:
body, html {
margin:0px;
min-height:100%;
}
body {
background: url("images/background.png") #141211;
color: #000;
font-family: sans-serif;
}
#center {
width:1000px;
overflow: hidden;
min-height:100%;
margin: auto;
background:white;
}
#logo {
padding-top:12px;
height:438px;
border-bottom: 7px solid #40648b;
background: #5787bc url("images/top.png");
}
#logo #menu {
background:#336699;
height:55px;
border-top:1px solid #325780;
}
#offer {
height:375px;
background: #dadada;
border-bottom: 3px solid #b6b6b6;
}
#offer-a {
padding-top:20px;
margin:auto;
}
#offer-a div {
width: 330px;
height: 330px;
background: url("images/offer.png");
display:table-cell;
}
#offer-a p {
width: 300px;
height: 300px;
background:white;
margin:auto;
border:1px solid black;
}
#nav {
padding-left:15px;
width:285px;
float:left;
background:yellow;
}
#content {
padding-left:15px;
width:650px;
float:left;
}