Witam. Zacznę od kodu:
html:<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<title>Tytuł</title>
</head>
<body>
<div id="content">
<div id="top">
NAGŁÓWEK
</div>
<div id="left">
<ul>
<li><a href="http://www.strona.pl">RM.PL</a></li>
<li><a href="http://www.strona.pl">RM.PL</a></li>
<li><a href="http://www.strona.pl">RM.PL</a></li>
</ul>
</div>
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam non turpis eget sapien ultrices semper eu eu leo.
Nulla hendrerit erat eu augue consectetur adipiscing.
Sed ac velit ligula. Nulla aliquet elementum ultricies.
Nulla porta auctor mi, sed faucibus ligula lobortisullamcorper.
Quisque at dictum nisi. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Aenean
placerat sodales tristique. Donec nunc elit, aliquet nec cursus
id, volutpat malesuada lacus. Phasellus hendrerit sagittis elit,
vel pellentesque ante aliquet sed. Proin commodo quam nec risus
dignissim volutpat. Maecenas adipiscing facilisis purus, vitae
congue metus sagittis et. Suspendisse iaculis lacus neque.
Praesent lobortis leo et dui pellentesque quis eleifend magna iaculis. </p>
</div>
<div id="right">
PRAWE MENU
</div>
<div class="clear"></div>
<div id="footer">
STOPKA
</div>
</div>
</body>
</html>
css: body, table, td, th {
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 12px;
background-color: #000000;
}
#content {
width: 800px;
margin: 0 auto 0 auto;
}
#top {
height: 150px;
background: #afffaf;
}
#left {
width: 150px;
background: #00ab00;
float: left;
}
#page {
width: 500px;
background: #cfffcf;
border-left: 1px solid black;
float: left;
}
#right {
width: 150px;
background: #00ab00;
float: left;
}
#footer {
background: #006d00;
height: 20px;
}
#page p {
text-transform: uppercase;
color: #000000;
font-size: 10px;
font-style: italic;
}
#left ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#left ul li a, #left ul li a:visited {
display:block;
border:2px solid #295c17;
text-align:center;
background:#32741c;
padding:2px;
margin:2px;
color:white;
text-decoration:none;
font-weight:bold;
}
#left ul li a:hover {
background: #429128;
}
.clear {
clear:both;
}
Męczę się z tym już jakiś czas. Problem polega na tym, że div "right" spada na dół przy obecnej szerokości i obramowaniu diva "page". Po zmniejszeniu o 1px divy "left", "page" i "right" są w jednej linii tak jak chcę, żeby było. Co zrobić, żeby było tak przy zachowaniu obecnej szerokości i obramowaniu środkowego diva?
No i drugie pytanie: co zrobić, żeby prawy i lewy div wydłużały się razem ze środkowym?
Z góry dziękuję za odpowiedź.