CODEWITHSUNDEEP
internet-explorerfirefoxhtmlrendering
josh
josh

Reputation: 45

Divs are not rendering correctly

Here is some code from a practice site I'm making. It runs fine, the only thing is that there is no padding between the form and button despite my explicitly stating "padding-top: 50px;". In IE 9 with quirks mode on it renders the padding, but without quirks mode, or using Firefox (14), there is no padding.

<form action="action.php" method="post">
<div id="thumbails" class="thumbnails">
    <?php
        $query="SELECT page_title, page_thumb FROM `pages` WHERE page_thumb != ''";
        if($result = $mysqli->query($query))
        {
            $i = 1;
            while($row = $result->fetch_assoc())
            {?>
                <div id="container<?php echo $i?>" class="container" style="width:25%; float:left;">
                <img src="<?php echo $row[page_thumb]?>" height=220 width=200 />
                <input class="cbox" type="checkbox" name="pages[]" value="<?php echo $row[page_title]?>"/>
                </div>
            <?php
                $i++;
            }
        }
    ?>
</div>
<div id="submit" class="submit"  style="padding-top:50px;text-align:center;">
    <input type="submit"/>
</div>
</form>

When I use Firebug to inspect it, it's showing that the div containing the submit covers the whole form not just the submit button. In IE developer mode its the same thing unless quirks mode is on in which case it renders just how I want it to. But I don't see any quirks! What is wrong with this code?

Upvotes: 1

Views: 1322

Answers (1)

Federico
Federico

Reputation: 3892

I think the problem is that thumbnails div has not a specified height. The divs contained into thumbnails are floating, so their heights are not calculated for the final height of the father div. The result is that thumbnails' height is 0, so the submit div calculate is padding-top from the top page; but the image's height is 200px, so input is pushed down. If you try:

<div id="thumbails" class="thumbnails" style="height:300px;">

You will see what you want. To find out this problem usually I put some border around the div.

<div id="thumbails" class="thumbnails" style="height:300px; border:1px solid red;">
<div id="submit" class="submit"  style="padding-top:50px;text-align:center;border:1px solid green;">

So I see margin and padding immediately.

Upvotes: 1

Related Questions