CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 2656

Can't find the bug on my site

Here is my site:

http://mihalko.eu/download/

Why is the catalogue in the 2nd row floated to the right, and not to the left (the left side is blank - only in the 2nd row)?

I added some more downloads with firebug, and everything is fine, except the 2nd row.

Picture http://d.pr/a8VQ

Upvotes: 0

Views: 79

Answers (5)

PREEB
PREEB

Reputation: 1362

In my experience you want to have a with a class of "clear: both" in order to display properly. W3Schools

`

.clearboth {
    clear: both;
    width: 100%;
}

<div class="download-box">
    <div class="download-box-image">
        <a href="http://mihalko.eu/downloads/slovkolex_katalog_2011.pdf" title="Slovkolex katalóg"><img alt="Slovkolex" src="http://mihalko.eu/image/data/download/slovkolex.jpg" width="140"></a></div>
    <div class="download-box-text">
        <div class="nazov">
            Katalóg Slovkolex</div>
        <div class="typ">
            *.pdf</div>
        26 236 kB</div>
</div>
<div class="download-box">
    <div class="download-box-image">
        <a href="http://mihalko.eu/downloads/DEMA_dealerbook_2012.pdf" title="Dema 2012"><img alt="Dema 2012" src="http://mihalko.eu/image/data/download/Dema 2012.jpg" width="140" style="opacity: 1; "></a></div>
    <div class="download-box-text">
        <div class="nazov">
            Katalóg Dema 2012</div>
        <div class="typ">
            *.pdf</div>
        32 116 kB</div>
</div>

<!-- HERES THE CHANGE -->
<div class="clearboth"></div>

<div class="download-box">
    <div class="download-box-image">
        <a href="http://mihalko.eu/do`enter code here`wnloads/slovkolex_katalog_2011.pdf" title="Slovkolex katalóg"><img alt="Slovkolex" src="http://mihalko.eu/image/data/download/slovkolex.jpg" width="140"></a></div>
    <div class="download-box-text">
        <div class="nazov">
            Katalóg Slovkolex</div>
        <div class="typ">
            *.pdf</div>
        26 236 kB</div>
</div>

`

Upvotes: 0

davidgmar
davidgmar

Reputation: 568

.download-box {
    float: left;
    margin: 20px 15px 20px 0;
    padding: 0;
    width: 295px;
    height: 104px;
}

Upvotes: 0

TheTechGuy
TheTechGuy

Reputation: 17354

@thenetimp is correct. Change the height of the very first block of 102.

style="height: 102px;"

should fix the problem.

Note: It is be design, the float will take the next available highest place where it can fit itself. One pixel is a difference therefore it fits itself a little higher.

Upvotes: 0

darek
darek

Reputation: 301

Add

after each two entries, hr should have clear:both, width 100%

You can also pack each two entries to separate div

Upvotes: 0

thenetimp
thenetimp

Reputation: 9820

because the 1st box has a height of 103px while the 2nd one has a height of 102px, therefore the next float comes in at the lowest height. make the first image 102px solves your problem

Upvotes: 4

Related Questions