Problem z ustawieniem div'ow

0

Witam, mam do zrobienia prosta stronke z wykorzystaniem CSS. Chce aby część menu przylegała z lewej strony części właściwej strony. Zrobiłem dużego, głównego diva i wstawiłem do niego div menu (float:left) i div z treścią właściwa strony(float:right) ale pomimo dopasowania rozdzielczości nie chcą leżeć obok siebie a wyświetlają sie jedna po drugim. Czy mógłby ktoś mi pomoc z tym prostym choć męczącym mnie już problemem?

Oto część html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="pl">
<head>
	<title>Sieci komputerowe - Mateusz Gorski</title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>
</head>
<div id=body>
<body>
<div id="wrapper">
<div id="MENU">
    <ul>
      <li><a href="index.html">Strona glowna</a></li>
      <li><a href="php.html">php</a></li>
      <li><a href="css.html">CSS</a></li>
    </ul>
</div>
<div id="page_container">
  <p><img src="Foot-Muscles1-300x213.jpg" alt="foot" width="300" height="213" class="floatleft" id="floatLEFT" />Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna <h1>Tekst pisany naglowkiem h1</h1> </p><p>
  Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna <img src="foot.png" width="300" height="213" alt="foot2" class="floatright"/>Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna <h3><p> I bez arkusza styli ... <a href="index2.html">KLIK</a></h3> </p>
</div>
</div>
<div class="push"></div>
<div class="footer">
<p><center>
Copyright (C) Mateusz Gorski 2011
</center></p>
</div>
</body>
</div>
</html>
 

oraz część css:

 @charset "iso-8859-2";
/* CSS Document */

body{
	background-image:url(backgroundblood.PNG);
	background-repeat:no-repeat;
	padding:0;
}
#wrapper{
	background-color:transparent;
	width:1012px;
	height:600px;
	margin: 0 auto;
	margin-top:100px;
}

#page_container{
	background-color:#FFF;
	width:800px;
	height:600px;
	border-top-color:#F33;
	border-left-color:#F33;
	border-right-color:#F33;
	border-bottom-color:#f33;
	border-style:dashed;
	border-width:5px;
	float:right;
}

#footer{
	background-color:#FFF;
	margin:auto;
	width:800px;
	height:50px;
	
}

#MENU {
	width: 200px;
	margin-top:25px;
	overflow: hidden;
}
#MENU ul {
  margin:0px; 
  padding:0px; 
  background-color:#fff;
  font-size:24px;
  font-family:Tahoma, Geneva, sans-serif;
  font-weight:bold;
  color:#666;

}

#MENU ul li{
  height:50px;
  line-height:25px;
  list-style:none;
  padding-left:10px;
  padding-top:20px;
  margin-top:10px;
  
  border-top:#f33 dashed;
  border-bottom:#f33 dashed;
  border-left:#f33 dashed;
  border-width:1px;
  cursor:pointer;
}

#MENU ul li:hover {
  background-color:#F90; 
  position:relative;
}

.push {
height:50px;
}
.footer{
	height:25px;
}

a
{
	text-decoration:none;
	text-transform:none;
	color:#666;
}

p
{
	padding-left:10px;
	padding-right:10px;
}

img.floatleft{
	float:left;
	margin:5px;
}

img.floatright{
	float:right;
	margin:5px;
}

Pozdrawiam serdecznie,
M

wygląda to mniej więcej tak:
http://img849.imageshack.us/img849/5687/wwwzz.jpg

0

Wystarczy dodać do

#page_container
margin-top:

z ujemną wartością. Jednak być może istnieje jakiś lepszy sposób na rozwiązanie tego problemu.

0

ja miałem podobny problem i rozwiązałem go ostawiając ręcznie, jeśli chcesz mieć automatycznie któraś dopasowywana to nie znalazłem rozwiązania.
ręcznie ustawiłem szerokość głównego div'a i potem dopasowywałem resztę i tu cie zaskoczę jak i innych na pewno prawy div ma niestandardowa liczbę np zamiast 340 mam 349. Nie wiem czemu tak ale działa. Miałem już odpowiedzi ze to nieprofesjonalnie i nie estetycznie ale dla domowych czy komuś z znajomych to chyba będzie wisieć czy ma jeden pixel mniej co innego jeśli strona jest robiona dla firmy.

1 użytkowników online, w tym zalogowanych: 0, gości: 1