Problem z ustawieniem elementów obok siebie Opcje

[dominikx96]

mam problem z ustawieniem elementów.
Otóż na stronie posiadam obrazek + 2 linijki tekstu + blok tekstu z białym tłem.
Wszystko jest na tle, które jest roziągnięte na maxa w szerokości, a ograniczone w wysokości.

Zobrazuje to ten screen:

http://scr.hu/0ec9/i1pn7

Na mojej rozdziałce monitora jest wszystko git, ale na innych (mniejszych już się strona rozsypuje)- elementy schodzą w dół poza niebieskie tło, jedynie babka zostaje.

Kod html i css wygląda tak (kombinowałem różnymi sposobami, w końcu jest coś takiego:

[HTML] pobierz, plaintext 
<div id="content4">
<div id="centrowanie">
	<div class="girl"></div>
	<div id="lewus">
	<div class="blok-tekstowy">
	<div class="content4-text1">LOREM IPSUM</div>
	<div class="content4-text2">LOREM IPSUM</div>	
	</div>
	<div class="content4-background">
		<div class="content4-backgroundtext">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		Praesent luctus enim ipsum. Cras vel justo nunc. 
		Sed sollicitudin nisi sit amet blandit tincidunt. 
		Cras libero ipsum, sagittis nec hendrerit id, interdum eget erat. 
		Nunc pharetra accumsan tortor sit amet varius. Quisque quis metus luctus.
		<br/><br/>
		Vivamus quis lacinia diam. Sed faucibus lorem orci, quis cursus quam ornare id. Suspendisse cursus nisl et dignissim rutrum. Integer in iaculis tellus.
		</div>
	</div>
	</div>
</div>
</div>
[HTML] pobierz, plaintext 

i css:

[HTML] pobierz, plaintext 
#content4{
margin-top:50px;
width:auto;
height:708px;
background-color:#dbe2f2;
}
 
.girl{
float:left;
width:337px;
height:660px;
background:url(../images/girl.png);
}
 
#lewus{
float:left;
margin-left:50px;
}
 
 
.blok-tekstowy{
margin-top:80px;
margin-left:80px;
}
 
.content4-text1{
font-family: latobold;
font-size: 80px;
color:#3c6199;
}
 
.content4-text2{
font-family: latolight_italic;
font-size: 30px;
color:#3c6199;
}
 
.content4-background{
width: 580px;
height: 330px;
background-color:#FFF;
 
-moz-border-radius:8px; /* FF */
-webkit-border-radius:8px; /* przeglądarki z webkitem (Safari, Chrome itp.) */
-khtml-border-radius:8px; /* przeglądarki typu K-meleon (typowo Linuxowe) */
border-radius:8px; /* pozostałe przeglądarki */
}
 
.content4-backgroundtext{
font-family: latoregular;
font-size: 21px;
color:#3c6199;
text-align:left;
width:500px;
height:80px;
margin-left:50px;
margin-top:50px;
}
[HTML] pobierz, plaintext 

Proszę, pomóżcie !

[werdan]

Te elementy nie mieszcza sie kolo siebie na mniejszych rozdzielczosciach.

div.girl ma 337 px szerokosci
div.lewus ma 626px szerokosc + 50px margin-left.

Sprobuj pousuwac stałe szerokosci w pikselach lub daj w %

[dominikx96]

Ale jak usuwam wymiary girl (obrazek) to mi on znika

[werdan]

Sprobuj dac obrazek nie jako tło elementu a zwykły <img>. Najlepiej jakbyś dał przykład online, to można sie pobawić i coś poradzić.

Do jakiej minimalnej rozdzielczosci text powinien być koło obrazka?