Remove space between side by side divs

Question

I have created a div that allows people to select a section name and it will display the appropriate image, with a caption. I am having some trouble getting the section list and the image to display exactly side by side and have both take up the same height. Also, my picture caption (figcaption) does not obey the figure width, but I may just be overlooking that. I have tried many different combinations of float, overflow, display property tweaks as suggested by other Stackoverflow question answers, but none of them seem to produce the correct output.

Here is a JSFiddle of the code: http://jsfiddle.net/8We2Y/

The code is also included the code here.

CSS:

#main {
    width: 50%;
    padding: 15px;
    margin: 0 auto;
}

.gamemode {
    background: #eee;
    padding: 19px;
    border-bottom: 4px solid #ccc;
}

.gamemode:hover {
    background: #ccc;
    cursor: pointer;
    border-bottom: 4px solid #0093dd;
}

.gamemode:selected {
    border-bottom: 4px solid #0093dd;
}

#gm-text {
    width: 25%;
    display: inline-block;
    vertical-align: middle;
}

#gm-image {
    width: 74.5%;
    height: 556px;
    background: url(images/survivalimg.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}

figcaption { 
  position: absolute;
  background: rgba(0,0,0,0.8); 
  color: #FFF;
  margin-top: 415px;
  margin-left: -40px;
  width: 100%;
  padding: 0px 20px;
}

figcaption p {
    font-size: 1em;
    color: #FFF;
}

#captitle { 
    font-size: 1.4em;
    color: #FFF;
}

If you look at the CSS, you will notice that my width's for the two items are set to 25% and 74.5%, which doesn't add up to the full 100%. If I were to set the one to 75%, it just moves to a new line.

HTML:

<div id="main">
    <div id="showcase">
        <div id="gm-text">
            <p class="gamemode" id="survival" onclick="changeImageSurvival();"><i class="fa fa-globe"></i> Survival</p>
            <p class="gamemode" id="creative" onclick="changeImageCreative();"><i class="fa fa-building"></i> Creative</p>
            <p class="gamemode" id="sg" onclick="changeImageSG();"><i class="fa fa-cutlery"></i> Survival Games</p>
            <p class="gamemode" id="factions" onclick="changeImageFactions();"><i class="fa fa-link"></i> Factions</p>
            <p class="gamemode" id="kitpvp" onclick="changeImageKitPvP();"><i class="fa fa-bullseye"></i> KitPvP</p>
            <p class="gamemode" id="ctf" onclick="changeImageCTF();"><i class="fa fa-flag"></i> Capture the Flag</p>
            <p class="gamemode" id="spleef" onclick="changeImageSpleef();"><i class="fa fa-spoon"></i> Spleef</p>
        </div>
        <div id="gm-image">
             <figure>
                <figcaption>
                    <p id="captitle">Section 1</p>
                    <p id="caption">Section one info.</p>
                </figcaption>
            </figure>
        </div>
    </div>
</div>

Answer 1

You need to get rid of the space between the divs since it is inline-block. Change this,

    <div id="gm-text">
   </div>
    <div id="gm-image">

To

<div id="gm-text">

</div><div id="gm-image">

Or

<div id="gm-text">

</div><!--
--><div id="gm-image">

That way you can keep your width 25% and 75%. For same height issue, see related question. How do I keep two divs that are side by side the same height?

Answer 2

This is an annoying inline-block issue. One way to solve it is to set

font-size:0; 

on the container element. Of course, you will have to state the desired font size on every child element that contains text. If you don't, the font-size: 0 property will hide any text.

Updated JsFiddle:

http://jsfiddle.net/7fG3E/

Answer 3

please see here http://jsfiddle.net/T9GQ7/

#gm-text {
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    clear: both;
    float:left;   /*here */
}
#gm-image {
    width: 75%;
    height: 556px;
    background: url(http://www.wallsave.com/wallpapers/1024x768/red-/22118/red-background-desktop-backgrounds-22118.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    clear: both;
}