Stworzenie layoutu strony

0

Już w pierwszy zdaniu proszę o wyrozumiałość, na początku nauki napotkałem duży problem, który nie pozwala mi iść dalej.

Chcę zaprojektować układ strony. Z tego co dotąd doczytałem i widziałem w źródłach stron, robi się to za pomocą

, ale moje wysiłki dla wstawienia trzech div'ów w jednej linii w środku trzeciego ciągle nie działają. Wiem, że to bardzo podstawowy błąd, ale jeszcze nie znalazłem wytłumaczenia, dlaczego tak się dzieje.
Dla zwizualizowania sobie tego, czy sekcje tworzą się tak, jak chcę dodaję tam jpegi wypełnione kolorem. Niestety, sekcjaGlowna jest pod sekcjaLewa, a sekcjaPrawa pod sekcjaGlowna. Będę wdzięczny za wytknięcie każdego błędu i sugestie, jak to poprawić.
Poniżej kod:</p>

index:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<meta name="author" content="odZera">
		<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]--> 
        <style>
            article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{
                display: block;
            }
        </style>
		<link rel="stylesheet" href="style.css">
        <title>First try</title>
    </head>
    <body>
		<div class="mainBox">
			<header>
			  <img src="images/black.jpg" class="glownyBanner"></img>
			</header>
			<nav class="mainMenu">
			<p>Pozycja1 | Pozycja2 | Pozycja3 | Pozycja4 | Pozycja5 | Pozycja6 | Pozycja7 </p>
			  </nav>
			<div class="sekcjaLewa">
			  <img src="images/blue.jpg" class="leftMenuSize"></img>
			  </div>
			<div class="sekcjaGlowna">
			  <p><img src="images/green.jpg" class="mainBoardSize"></img>
			</div>
			<div class="sekcjaPrawa">
			  <p><img src="images/violet.jpg" class="leftMenuSize"></img>
			</div>
			<footer class="stopkaGlowna">
			  <p>Site footer</p>
			</footer>
		</div>
    </body>
</html>

style.css

.mainBox {
margin-left: 15%;
margin-right: 15%;
width: 70%;
height: 100%;
}
.glownyBanner {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 10em;
}
.mainMenu {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 1em;
text-align: center;
}
.sekcjaLewa {
margin-left: 0;
margin-right: auto;
margin-top: 1em;
width: 13em;
height: 32em;
}
.leftMenuSize {
margin-left: auto;
margin-right: auto;
width: 13em;
height: 32em;
}
.sekcjaGlowna {
margin-left: auto;
margin-right: auto;
margin-top: 1em;
width: 26em;
height: 32em;
}
.mainBoardSize {
margin-left: auto;
margin-right: auto;
width: 26em;
height: 32em;
}
.sekcjaPrawa {
margin-left: auto;
margin-right: 0;
margin-top: 1em;
width: 13em;
height: 32em;
}
.stopkaGlowna {
margin-left: auto;
margin-right: auto;
width: 70%;
text-align: center;
}
0

poczytaj sobie o właściwości "display" :)
i albo display: inline-block; albo float: left; (ale floaty się gorzej wyrównuje i trzeba je "czyścić" clear-em - ale o "float" też poczytaj)

0

Słuszne dzięki za naprowadzenie! Przede mną jeszcze co najmniej wiele do zrobienia.

1 użytkowników online, w tym zalogowanych: 0, gości: 1