[CSS][HTML] Wyświetlanie divów obok siebie Opcje

[Lethys]

Witam,

Mam problem z poprawnym wyświetleniem dwóch divów obok siebie. Wiem, że wiele razy temat był wałkowany ale mimo, że ogarnąłem podobne tematy nadal coś nie chce działać.

Jak powinno być: Div Main powinien się dzielić na dwa odrębne divy obok siebie main_left i main_right. Obecnie main_right przejmuje właściwości main_left, zespaja się z nim.

Tak to wygląda:

Screen: http://oi41.tinypic.com/1zzj5lv.jpg

W ramce powinien być tylko prawy div, a lewy przejmuje tak jakby właściwości css tego prawego diva i też mam ramke :?

Kod:

HTML

[HTML] pobierz, plaintext 
 <div id="main">
 
 <div id="main_left">
 <h2>Strona główna</h2><hr />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor quam a nisl suscipit ultricies. Morbi consectetur semper massa, at volutpat lorem rhoncus a. Sed posuere, nisl vel convallis luctus, neque ipsum gravida orci, eu luctus turpis velit ut mi. Quisque tempor libero eu libero sodales pulvinar. Quisque tincidunt interdum elit, nec tempus tortor placerat in. Fusce vulputate, nisl vitae interdum placerat, diam nulla ultrices elit, et molestie justo justo ac elit. Praesent id diam elementum, ornare nisi non, consectetur dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse fringilla mauris mauris, at posuere justo rutrum lacinia. </p>
 
 </div>
 
 <div id="main_right">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor quam a nisl suscipit ultricies. Morbi consectetur semper massa, at volutpat lorem rhoncus a. Sed posuere, nisl vel convallis luctus, neque ipsum gravida orci, eu luctus turpis velit ut mi. Quisque tempor libero eu libero sodales pulvinar. Quisque tincidunt interdum elit, nec tempus tortor placerat in. Fusce vulputate, nisl vitae interdum placerat, diam nulla ultrices elit, et molestie justo justo ac elit. Praesent id diam elementum, ornare nisi non, consectetur dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse fringilla mauris mauris, at posuere justo rutrum lacinia. </p>
 </div>
 
 <div class="clear"></div>
 </div>
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
#main{
color: #4d4e4f;
margin-left: 5%;
margin-right: 5%;
margin-top: 20px;
padding-bottom:80px; /* Height of the footer */
}
 
#main_left{
width: 70%;
float: left;
margin-right: 50px;
}
 
#main_right{
padding: 50px;
border:2px solid;
border-radius:2px;
box-shadow: 10px 10px 5px #888888;
}
 
.clear{
clear: both;
}
[HTML] pobierz, plaintext 

[martex]

[HTML] pobierz, plaintext 
    #main{
	width:1200px;
	position:relative;
    color: #4d4e4f;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    padding-bottom:80px; /* Height of the footer */
    }
 
    #main_left{
    width:750px;
    float: left;
    margin-right: 50px;
    }
 
    #main_right{
	width:250px;
	float:left;
    padding: 50px;
    border:2px solid;
    border-radius:2px;
    box-shadow: 10px 10px 5px #888888;
    }
 
    .clear{
    clear: both;
    }
 
[HTML] pobierz, plaintext 

ustawilem ci na sztywno teraz potrenuj i sam poustawiaj czy % czy pixy

Ten post edytował martex 6.09.2013, 16:08:05

[Turson]

Już nic

Ten post edytował TursoN 6.09.2013, 16:09:02

[martex]

jak bedzie chcial % to musi kleic do lewego