Mam problem z poprawnym wyświetleniem niektórych elementów mojej strony.
Otóż chodzi o to, że mam 3 obiekty : 2 kolumny i 1 logo
Jedna kolumna jest umiejscowiona po lewej stronie, a druga po prawej. Po środku, na tej samej wysokości ma być logo. No i wstawiam to logo. Co mi się ukazuje na oczach? Lewa kolumna spadła znacząco na dół "wypchnięta" przez scentrowane logo.
Próbowałem 2 sposobów:
W pierwszym sposobie zdefiniowałem sobie dwa divy, czyli przyszłe kolumny - nadałem im formatowanie, kolor, pozycjonowanie absolutne itd. :
div.box {
background: blue;
border-width: 3px;
border-style: solid;
border-color: red;
height: 20cm;
width: 3cm;
font-size: 22px;
positon: absolute;
left: 0px;
top: 10px;
}
div.box2 {
background: blue;
border-width: 3px;
border-style: solid;
border-color: red;
height: 20cm;
width: 3cm;
font-size: 22px;
position: absolute;
right: 0px;
top: 10px;
}
body
{
background: url(background.jpg);
}
Cały ten arkusz stylów jest w osobnym pliku .css .
W pliku index.html ustawiłem sobie takie coś:
Tym oto sposobem uzyskałem efekt, który możecie zobaczyć na mojej stronie internetowej: LINK
Jak widać, nie wygląda to zbyt ciekawie

Sposób nr.2 :
do pliku .css dodałem specjalną klasę:
.logo {
position: absolute;
left: 50%;
}
w pliku index.html wywołałem obrazek uwzględniając powyższą klasę:
<img src="logo.png" class="logo">
reszta wygląda tak samo.
Dzięki temu sposobowi lewa kolumna już nie spada, ale logo i tak nie jest umiejscowione w połowie ekranu. Dotyka ją dopiero lewą krawędzią, tak jakby od końca, a reszta idzie dalej w prawo. Po prostu chciałbym uzyskać identyczny efekt jak przy użyciu znacznika <center></center>, oraz żeby kolumna nie spadała, choć przyczynę tego zjawiska znam, ale nie mogę doszukać się błędów.
