Pozycjonowanie obraków

[senioro]

Witam mam mały problem z ustawieniem odpowiednio obrazków zawsze mi je wywala jeden pod drugim a chciałbym aby to wyglądalo tak :




Mam coś takiego :

Kod:

<div class="srodkowy"><img src="images/wybierzgrupewiekowa.jpg" alt="wybierz grupę wiekową"/> </div>
<div class="lewy"><img src="images/podstawowa.jpg" alt="Podstawowa"/></div>
<div class="prawy"><img src="images/podstawowa2.jpg" alt="Podstawowa"/></div>

<style type="text/css">
.srodkowy {margin-left: 0px}
.srodkowy img {margin-left: 130px; margin-top: 80px;}
.lewy
{position:relative;
left: 350px;
bottom: 150px;}
.prawy {
position:relative;
left 350px;
bottom:190px;}
</style>

Jest to na stronie statycznej w wordpressie.

Czy ktoś wie jak takie coś zrobić? Bardzo prosze o pomoc.

[michalszyd]

Pobaw się float: left w .lewy, .prawy

[Kartofelek]

Źle pocięte to i wywala.
Całość dajesz w diva o szerokości tego największego.
Potem w tym divie dajesz:
- najwiekszy - bez floatów, width, height
- lewy - float:left; width, height
- prawy - float:left (lub right - nie ma znaczenia), width, height

Żadnych position, żadnych bottom i left, bo to błędne w twoim przypadku

[senioro]

Żadnych position, żadnych bottom i left, bo to błędne w twoim przypadku

Dzięki wielkie Jeszcze jedno mam pytanie, bo chciałem zrobić podobną rzecz opierając się na otrzymanych informacjach, ale niestety nie wychodzi.Mniej więcej chciałem aby to tak wyglądało :



Oczywiście dividery to tylko odzdoba, niekoniecznie potrzebna, ale nawet bez nich nie wychodzi, a pionowy divider w ogole się nie pojawia nawet...

Kod:

[code]
<div id="kontener">
<div class="cleaner divider"/></div>
<div id="B">Obrazek i tekst +cleaner divider pod obrazkiem i tekstem</div>
cleaner2 divider2
<div id="C">Obrazek i tekst +cleaner divider pod obrazkiem i tekstem</div>
<div id="D">Obrazek i tekst +cleaner divider pod obrazkiem i tekstem</div>
cleaner2 divider2
<div id="E">Obrazek i tekst +cleaner divider pod obrazkiem i tekstem</div>

style :
.two-forth {
position:relative;
float: center;
width: 800px;
background:#fff;
padding-bottom:50px;
}
.cleaner {
clear: both;
}
.divider {
border-bottom-color: #8FA50A;
border-bottom-style: solid;
border-bottom-width: 2px;
margin-bottom: 20px;
padding-bottom: 20px;
}
h1 {font-size: 27px;}
h2 {font-size: 27px;}
h3 {font-size: 27px;}
h4 {font-size: 27px;}

.cleaner2 {
clear: both;
}
.divider2 {
border-left-color: #8FA50A;
border-left-style: solid;
border-left-width: 2px;
margin-left: 20px;
padding-left: 20px;
}
#kontener {width: 504px; margin: 0 auto; overflow: hidden;}
#B {width: 250px; height: 250px; background: red; float: left;}
#C {width: 250px; height: 250px; background: green; float: left;}
#D {width: 250px; height: 250px; background: black; float: left;}
#E {width: 250px; height: 250px; background: orange; float: left;}
koniec styli

[/CODE]

[Kartofelek]

Znowu brak praktyki
float:center ?

Ogólny przepis:
- wszystko w div o danej szerokości
- 2 lewe: float:left; width; min-height margin-right; margin-bottom
- 2 prawe: float:right; width; min-height; margin-left; margin-bottom