Forum PHP.pl > [HTML] 2 divy obok siebie

Pomoc - Szukaj - Użytkownicy - Kalendarz

RaiZeN

18.10.2014, 10:42:22

Cześć,

Od razu zaznaczam że jestem noobem w html. :V
Tworzę prostą stronę, i jak to bywa w końcu musi znaleźć się jakiś błąd którego nie umiem rozwiązać. Chodzi o postawienia 2 divów pionowo i 2 poziomo. Kod wygląda tak:

HTML

[HTML] pobierz, plaintext 
<div class="info_header">
	Informacje
</div>
<div class="info_content">
	test
</div>
<div class="stats_header">
	Statystyki
</div>
<div class="stats_content">
	testtesttest
</div>
[HTML] pobierz, plaintext

CSS

Kod

.info_header {
    float: left;
    clear: both;
    margin-top: 5%;
    width: 50%;
    margin-left: 15%;
    margin-right: 15%;
    background-color: #FFFFFF;
    height: 5%;
    display: inline-block;
    font-family:Arial;
    overflow: hidden;
}

.info_content {
    float: left;
    clear: both;
    margin-top: 1%;
    width: 50%;
    margin-left: 15%;
    margin-right: 15%;
    background-color: #FFFFFF;
    height: 20%;
    display: inline-block;
    font-family:Arial;
    overflow: hidden;
}

.stats_header {
    float: right;
    clear: both;
    margin-top: 1%;
    width: 24%;
    margin-left: 61%;
    margin-right: 10%;
    background-color: #FFFFFF;
    height: 5%;
    display: inline-block;
    font-family:Arial;
    overflow: hidden;
}

.stats_content {
    float: right;
    margin-top: 1%;
    width: 24%;
    margin-left: 61%;
    margin-right: 10%;
    background-color: #FFFFFF;
    height: 20%;
    display: inline-block;
    font-family:Arial;
}

Chciałem zrobić margin-bottom ale to raczej nie jest zbyt profesjonalne, + nie działałoby na wszystkich rozdzielczościach. :x

Daimos

18.10.2014, 11:36:15

Użyj warstw tylko do ustalenia szerokości kolumn, a w środku wstawiaj kolejne i tam ustalaj marginesy i nie będziesz miał problemów:

[HTML] pobierz, plaintext 
<div style="width:50%">
<div style="margin: jakitam chcesz, padding...">tresc</div>
</div>
<div style="width:50%">
<div style="margin: jakitam chcesz, padding...">tresc</div>
</div>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.