[CSS]Dwa, wycentrowane divy obok siebie Opcje

[mateŁusz]

A więc mam już dwa divy wyśrodkowane, lecz są one jeden pod drugim. Powinny być obok siebie i między nimi odstęp, np. 10 px.

CSS:

[HTML] pobierz, plaintext 
.fanpage {
width: 250px;
height: 350px;
border: 1px solid #550023;
background-color: #750042;
position: relative;
margin: 0 auto;
}
 
.fanpage_naglowek {
width: 250px;
height: 30px;
background-image: url(images/naglowekfp.png);
background-repeat: no-repeat;
 
}
 
 
.fanpage1 {
width: 250px;
height: 350px;
border: 1px solid #550023;
background-color: #750042;
margin: 0 auto;
position: relative;
 
 
 
}
 
.fanpage1_naglowek {
width: 250px;
height: 30px;
background-image: url(images/naglowekfp1.png);
background-repeat: no-repeat;
 
}
 
 
 
.stala {
 
margin-left: auto;
margin-right: auto;
 
 
}
[HTML] pobierz, plaintext 

HTML

[HTML] pobierz, plaintext 
<div class="stala">
<div class="fanpage"><div class="fanpage_naglowek"></div>
      </div>
<div class="fanpage1"><div class="fanpage1_naglowek"></div>
</div>
</div>
[HTML] pobierz, plaintext 

Jak do przerobić, aby było dobrze? (IMG:style_emoticons/default/biggrin.gif)

DIV 1 | DIV 2

[d3ut3r]

http://jsfiddle.net/X5bgK/embedded/result/

poczytaj o CSS skupiając się na float.

Ten post edytował d3ut3r 22.08.2012, 10:06:06

[mateŁusz]

Czytałem tam sporo na internecie o centrowaniu, aby były obok siebie itd. za pomocą 'float: left' - jak to użyję to owszem jest obok siebie, ale div 1 jest przy borderze (?nie wiem jak to nazwać) po lewej stronie, a div 2 jest po środku. Mają być oba wycentrowane ;d

@edit
Dzięki za link, zaraz przerobię tak jak mi trzeba (IMG:style_emoticons/default/smile.gif)

@edit2
Twój pomysł się nie sprawdził, ponieważ przy zmienieniu rozmiarów przeglądarki to raz są obok siebie, a raz jeden pod drugim (ctrl + scroll)

[HTML] pobierz, plaintext 
 #wrapper{
    width:514px;
    margin:0 auto;
 
}
 
.clearfix{
    clear:both;
}
 
.column{
 
    width:250px;
    height:350px;
    border: 1px solid #550023;
    background-color: #750042;
    float:left;
 
}
 
#col1{
    margin-right:10px;
}
 
.columndj {
width: 250px;
height: 30px;
background-image: url(images/naglowekfp.png);
background-repeat: no-repeat;
}
 
.columnpresenters {
width: 250px;
height: 30px;
background-image: url(images/naglowekfp1.png);
background-repeat: no-repeat;
}
[HTML] pobierz, plaintext 

Ten post edytował mateŁusz 22.08.2012, 10:19:57

[!*!]

http://jsfiddle.net/NtNtD/ - ustalasz szerokość
http://jsfiddle.net/NtNtD/1/ - lub nie

[mateŁusz]

Dziękuję.
/do zamknięcia (IMG:style_emoticons/default/smile.gif)