Noonana73
Noonana73

Reputation: 3

2 DIVS inside parent DIV

Here is my code:

<div id ="game">
    <div id = "prodClick">
    Prod/Click:
    <div id="test">

    </div>
    </div>
        <div id = "image">
    <image src="assets/ressources.png" usemap="#upgrade" class = "mainImage"></image>   
    <map name="upgrade">
      <area shape="circle" style="display:block;" coords="98,46,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="390,38,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="98,436,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="395,436,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="208,185,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="322,183,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="208,305,22" href="/login/game/upgrade/boisClick.php">
      <area shape="circle" style="display:block;" coords="322,303,22" href="/login/game/upgrade/boisClick.php">
    </map>
    </div>
    <div id = "info">
    Prod/Heure
    </div>
</div>
<div id="end">

</div>

So game div has a width of 1000px and an height of 500px. ProdClick div has a width of 250px and an height of 500px. image div has a width of 500px and an height of 500px. ...

The problem is prodClick is correctly placed but it is filling the rest of the width with a kind of margin And then I had the image div instead of going to the right of prodClick div it is going under because it is filled by the margin

Image

Any solutions Sorry for my English I'm french

Upvotes: 0

Views: 73

Answers (1)

GROVER.
GROVER.

Reputation: 4388

Within your CSS:

#prodClick, #image{
    display: inline-block; // get rid off unnecessary margin
}

By the way, your English is parfait! :-)

Upvotes: 1

Related Questions