Reputation: 3
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
Any solutions Sorry for my English I'm french
Upvotes: 0
Views: 73
Reputation: 4388
Within your CSS:
#prodClick, #image{
display: inline-block; // get rid off unnecessary margin
}
By the way, your English is parfait! :-)
Upvotes: 1