trying to display divs horizontally - asked before I know but can't get it working

Question

I'm trying to format my css properly, to display two divs horizontally. The first div contains 3 divs, which looks good, like this, on the left of the screen:

You can see my code below.

Now I'm trying to get div4, image2, to fill that big white space.

But I just don't get it. I've tried lots of stuff from this site - overflow:hidden;, clear-both - but the best I can get is the image appearing on the right, ok, but below the baseline of #character_and_bubbles - not in the space I want. Any help please?

My markup code:

<div id = "character_and_bubbles">

 <div id = "top_bubble_div">
  <div id="top_bubble">
   bubble text here
  </div>
 </div>

 <div id = "p_mechanic">
  mechanic image here
 </div>

 <div id = "right_bubble_div">
  <span id="right_bubble">
   bubble text here
  </span>
 </div>
</div>


<div id="image2">
    # how do I position this image in the big white space?
</div>

And my Sass:

#character_and_bubbles {
margin-top:80px;

#top_bubble_div {
#top_bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    width: 500px;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}

#top_bubble:after, #top_bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 475px;
}
#top_bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 472px;
}
}

#p_mechanic {
  padding:20px;
  float:left;

}


#right_bubble_div {
padding:20px;

#right_bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    width: 282px;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}

#right_bubble:after, #right_bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: 68px;
    content: '';
    position: absolute;
    right: 332px;
}
}
}

#image2{
/* how do I get this to fill that big white space? */
    float:right;
}

Answer 1

You need to move <div id="image2"> above the rest of the content in the source order. In its current position, it's rendered below the other content.

For example:

<div id="image2"># how do I position this image in the big white space?</div>
<div id="character_and_bubbles">
    <div id="top_bubble_div">
        <div id="top_bubble">bubble text here</div>
    </div>
    <div id="p_mechanic">mechanic image here</div>
    <div id="right_bubble_div">
        <span id="right_bubble">bubble text here</span>
    </div>
</div>

You also need to give it a height - either by filling it with content or with height: 300px;. Otherwise the browser renders it as empty / no dimensions.

http://jsfiddle.net/sTvGx/3/

But if your #image element is just there to hold a background image (non-semantic), why not make it a background element on the parent of all those divs, like the body?

I've assumed that you've provided Sass instead of CSS.