CODEWITHSUNDEEP
htmlcss-float
NMKloster
NMKloster

Reputation: 73

Another overlapping DIV

There are alot of overlapping DIV questions, and here's another: I want 3 blocks next to each other, and I have used the float: left; feature. My problem is that DIV number 3 (canvaswrapper) is laying on top of DIV number 2 (mapimage)

Here is CSS:

div.pagewrapper
{
text-align: center;
}

div.clear{ clear:both;}

div.mainwrapper
{
    min-width: 800;
    width: 80%;
    margin: 0 auto;
    //overflow: hidden;
}

div.headerfield
{
    float: top;
    text-align: center;
    min-height: 100px;
    margin: 0 auto;
}

div.infoleft
{
    float: left;
    min-width: 150px;
    min-height: 250px;
    position: relative;
    text-align: left;
    margin: 0 auto;
}

div.mapimage
{
    min-width: 200px;
    position: relative;
    margin: 0 auto;
    float: left;
}

div.canvaswrapper
{
    position: relative;
    min-width: 300px;
    margin: 0 auto;
    float: left;
}

And html:

<html>

    <head>
        <title>TODO title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="VPC.css"/>
    </head>

    <body>
        <div class="pagewrapper" style="background-color: #DDDDDD;">

        <div class="mainwrapper" 
             style="background-color: #BBBBBB">

            <div class="headerfield" 
                 style="background-color: #BBFFBB;">
                <h1>Some top thingy...</h1>
            </div>

            <div class="infoleft" 
                 style="background-color: #BBBBFF;
                        width: 200px;">
                <h3>Some info</h3>
            </div>

            <div class="mapimage" 
                 style="background-color: #FF99FF;
                        width: 220px;">
                <img src="Images/VPC01/VPC01.png" alt="Hole one" 
                     style="position: absolute; top: 0px; left: 0px; width: 200px"/>
            </div>

            <div class="canvaswrapper" 
                 style="background-color: #FFBBBB;
                        width: 300px;">
                <canvas id="courseimg" height="250" width="250"></canvas>
                <script>
                    var canvas = document.getElementById('courseimg');
                    var context = canvas.getContext('2d');
                    var imageObj = new Image();

                    imageObj.onload = function() {
                        context.drawImage(imageObj, 5, 5, 100, 100);
                    };
                    imageObj.src = 'Images/Eye.png';

                </script>
            </div>
        </div>
        </div>
    </body>
</html>

What's going on? And should I be using something other than DIVs for this anyway?

Upvotes: 0

Views: 484

Answers (1)

paulalexandru
paulalexandru

Reputation: 9530

Add this in the css to your mapimage div:

min-height: 250px;

So you will have:

div.mapimage
{
    min-width: 200px;
    position: relative;
    margin: 0 auto;
    float: left;
    min-height: 250px;
}

And it will look like you want.

Upvotes: 2

Related Questions