Problem z kodem na karcie produktu

[dkk]

Witam serdecznie,

Otwieram sklep internetowy i chcę zrobić fajne opisy produktów. Od 2 dni uczę się całkowicie od podstaw HTML i CSS . Coś mi wychodzi ale mam problem, może ktoś z Was będzie wiedział w czym tkwi błąd.

CSS:

Kod:

#opis1kolumna {
    font-size:12px; font-family:verdana,geneva,sans-serif; max-width: 200px; height:600px; text-align:left; position: relative; left: 0px; top:0px
    ; float:left; margin:35px, 35px, 35px, 0px
}


#opis2kolumna {
    font-size:12px; font-family:verdana,geneva,sans-serif; width: 200px; text-align:left; position: relative; left: 0px; top:0px
    ; float:left; margin: 35px; margin-right:0px
}

#opis3kolumna {
    font-size:12px; font-family:verdana,geneva,sans-serif; width: 200px; text-align:left; position: relative; left: 0px; top:0px
    ;margin:35px;float:right
}

h1.danielo{
    text-align:left; font-size:12px; font-weight:bold; width: 200px; }
img.daniel {
float:left
}
p.danielo { margin-top:8px
}

HTML:

Kod:

<div id="opis1kolumna">
    <p>
        <img alt="" class="danielo" src="/files/file/ValetPRO_Posieidon_Carnauba_Wash_Detailing_Szampon_Samochodowy.jpg" style="width: 188px; height: 438px;" /></p>
</div>
<div id="opis2kolumna">
    <h1 class="danielo">
        Wysoka zawartość Carnauby.</h1>
    <p class="danielo">
        Wyprodukowany na bazie emulsji naturalnej, brazylijskiej Carnauby. Wysoka zawartość najlepszych składnik&oacute;w nadaje temu szamponowi niezwykłe właściwości.</p>
    <br />
    <br />
    <h1 class="danielo">
        Nadaje połysku i uwydatnia niesamowitą głębię.</h1>
    <p class="danielo">
        Żaden szampon nie daje takiego kopa lakierowi jak Poseidon Carnauba Wash. Połysk, a przede wszystkim głębia lakieru jaką osiągniesz będzie Cię zachwycała po każdym myciu.</p>
    <br />
    <br />
    <h1 class="danielo">
        Świetny do pielęgnacji naturalnych wosk&oacute;w.</h1>
    <p class="danielo">
        Wiele szampon&oacute;w z g&oacute;rnej p&oacute;łki nie zmywa nałożonego wosku. Poseidon Carnauba Wash to coś więcej niż tylko szampon bezpieczny dla wosku.</p>
    <br />
    &nbsp;</div>
<div id="opis3kolumna">
    <h1 class="danielo">
        Nadaje kropelowanie na niezawoskowanym aucie.</h1>
    <p class="danielo">
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33]</p>
</div>
<p>
    &nbsp;</p>
<div class="head-products">
    Nasz Opis</div>
<p>
    <span style="font-family:verdana,geneva,sans-serif;"><span style="font-size:13px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Wiele obecnie produkowanych szampon&oacute;w samochodowych do detailingu nie narusza nałożonego wosku. Poseidon Carnauba Wash to coś więcej niż tylko szampon bezpieczny dla wosku, specjalnie opracowana formuła na bezie emulsji carnauby <strong>budzi do życia każdy wosk</strong> odbudowując jego strukturę, wyciąga <strong>maksimum głębi i połysku</strong>, dzięki czemu auto wygląda tak, jak zaraz po woskowaniu.</span></span></p>
<p>
    &nbsp;</p>
<p style="text-align: center">
    <iframe class="youtube-player" frameborder="0" height="510" src="http://www.youtube.com/embed/BMo9ZrHD01o?rel=0" title="YouTube video player" type="text/html" width="640"></iframe></p>
<p>
    &nbsp;</p>
<p>
    <span style="font-family:verdana,geneva,sans-serif;"><span style="font-size:13px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Delikatny <strong>zapach cyturus&oacute;w</strong> może budzić kontrowersje wśr&oacute;d os&oacute;b, kt&oacute;re szczeg&oacute;lnie zwracają uwagę na odczucia zmysłowe podczas mycia. Nam nie przeszkadzał, jak r&oacute;wnież nie zaimponował zbytnio pod tym względem.</span></span></p>

I mam taki krzaczek (pomiędzy 2. a 3. kolumną):


Mógłby ktoś rzucić okiem na kod?

[Kartofelek]

<p>
&nbsp;</p>
- nie ma czegoś takiego Albo margines albo nie masz odstępów

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
- nie ma czegoś takiego. Albo margines albo nie masz odstępów

<span style="font-family:verdana,geneva,sans-serif;"><span style="font-size:13px;">
? po co tak? Wystarczy 1 span. Style najlepiej w zewnetrznym pliku, a nie inline.


<br />
<br />
- nie ma czegoś takiego. Albo margines albo nie masz odstępów


<p>
<img alt="" class="danielo" src="/files/file/ValetPRO_Posieidon_Carnauba_Wash_Detailing_Szampon_Samochodowy.jpg" style="width: 188px; height: 438px;" /></p>
- p nie jest potrzebne

Cięzko się czyta, bo kiepsko sformatowany kod. Mogło być lepiej, ale też mogło być gorzej.

Patrząc na obrazek, myślę że można spokojnie zamknąć się w 2 divach i kilku akapitach tekstu. Więcej nie potrzeba.

[dkk]

Patrząc na obrazek, myślę że można spokojnie zamknąć się w 2 divach i kilku akapitach tekstu. Więcej nie potrzeba.

Czyli 1 div na obrazek i 2 div na pozostałe dwie kolumny? Czemu wyskakują takie krzaczki (pomiędzy kolumnami)?

Poprawiłem na ile mogłem:
HTML

Kod:

<div id="opis1kolumna">
    <img alt="" class="danielo" src="/files/file/ValetPRO_Posieidon_Carnauba_Wash_Detailing_Szampon_Samochodowy.jpg" style="width: 188px; height: 438px;" /></div>

<div id="opis2kolumna">
    <h1 class="danielo">
        Wysoka zawartość Carnauby.</h1>
    <p class="danielo">
        Wyprodukowany na bazie emulsji naturalnej, brazylijskiej Carnauby. Wysoka zawartość najlepszych składnik&oacute;w nadaje temu szamponowi niezwykłe właściwości.</p>
    <h1 class="danielo">
        Nadaje połysku i uwydatnia niesamowitą głębię.</h1>
    <p class="danielo">
        Żaden szampon nie daje takiego kopa lakierowi jak Poseidon Carnauba Wash. Połysk, a przede wszystkim głębia lakieru jaką osiągniesz będzie Cię zachwycała po każdym myciu.</p>
    <h1 class="danielo">
        Świetny do pielęgnacji naturalnych wosk&oacute;w.</h1>
    <p class="danielo">
        Wiele szampon&oacute;w z g&oacute;rnej p&oacute;łki nie zmywa nałożonego wosku. Poseidon Carnauba Wash to coś więcej niż tylko szampon bezpieczny dla wosku.</p>
</div>

<div id="opis3kolumna">
    <h1 class="danielo">
        Nadaje kropelowanie na niezawoskowanym aucie.</h1>
    <p class="danielo">
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33]</p>

</div>
<div class="head-products" style="position: relative">
    Nasz Opis</div>

CSS

Kod:

#opis1kolumna {
    font-size:12px; font-family:verdana,geneva,sans-serif; max-width: 200px; height:600px; text-align:left; position: relative; float:left; margin:20px 6% 20px 1%
}


#opis2kolumna {
    font-size:12px; font-family:verdana,geneva,sans-serif; width: 200px; text-align:left; position: relative;
    ; margin: 20px 1% 20px 1%; float:left
}

#opis3kolumna {
    font-size:12px; font-family:verdana,geneva,sans-serif; width: 200px; text-align:left; position: relative;
    ;margin: 20px 1% 20px 1%;float:left;
}

h1.danielo{
    text-align:left; font-size:12px; font-weight:bold; width: 200px; margin-top:30px
}
    
img.danielo { float:left;
}

p.danielo { margin-top:8px;
}

I zrzut ekranu:


Zapewne robię jakiś banalny błąd.

[Kartofelek]

.head-products {clear:both;}

---

I ta pozycja relatywna nie potrzebna

[dkk]

Pomogło Naprawdę wielkie dzięki!