CSS: cannot position image in a specific location

Question

I'm trying to position a background-image within a div element in the same line of a different block element (a video object), but it won't go up to align with the object. Here's a screen shot of how it looks now (the cake banner at the bottom right won't go up).

Any help or insights on what I'm doing wrong would be greatly appreciated!

This is my HTML code of that section:

<div id="bottom">
   <div id=video>
       <h2>Weekly Inspiration Song</h2>
          <p>Every morning, as we get up and bake all the goodies for you, 
             we get inspired by great music!</p> 
          <p>We want to share our inspiration with you, so we will update 
            this section with our favorite inspiration song weekly.</p> 
      <p>We hope you enjoy it like we do!</p>
       <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" 
               height="315"></object>
       <br />
   </div>
   <div id="bottombanner">
     <a href="menu.htm"></a>
   </div>
</div>

This is my CSS:

div#video {
 width: 35%;
 margin-left: 1%
}


div#video h2 {
   margin: 0;
   padding: 0px;
   font-family: 'StagSans-Book-Web',sans-serif;
}


div#video p {
   width: 560px; 
   font-size: 16px;
   font-family: 'StagSans-Book-Web',sans-serif;
}


div#video object {
   display: inline-block;
   float: left;
}


div#bottombanner a {
  background-image: url("cakebanner.jpg");
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  display: inline-block;
  float: left;
}

Answer 1

to set both container side by side you may use display : table, flex, grid or inline-block.

Also, mind your width (560px and 35% might not always match.

• flex, the easiest :

div#video {
  width: 35%;
  min-width:560px;
  margin-left: 1%
}

div#video h2 {
  margin: 0;
  padding: 0px;
  font-family: 'StagSans-Book-Web', sans-serif;
}

div#video p {
  width: 560px;
  font-size: 16px;
  font-family: 'StagSans-Book-Web', sans-serif;
}

div#video object {
  float: left;
}

div#bottombanner a {
  background-image: url("http://lorempixel.com/400/500/nature");
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  float: left;
}

/* for demo to avoid float to wrap */
#bottom {display:flex;
}

<div id="bottom">
  <div id=video>
    <h2>Weekly Inspiration Song</h2>
    <p>Every morning, as we get up and bake all the goodies for you, we get inspired by great music!</p>
    <p>We want to share our inspiration with you, so we will update this section with our favorite inspiration song weekly.</p>
    <p>We hope you enjoy it like we do!</p>
    <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" height="315"></object>

  </div>
  <div id="bottombanner">
    <a href="menu.htm"></a>
  </div>
</div>

* display:table/table-cell for older browsers such as IE8 ....

div#bottom {
  display: table;
}

div#video,
div#bottombanner {
  display: table-cell;
  vertical-align:top;
}

div#video h2 {
  margin: 0;
  padding: 0px;
  font-family: 'StagSans-Book-Web', sans-serif;
}

div#video p {
  width: 560px;
  font-size: 16px;
  font-family: 'StagSans-Book-Web', sans-serif;
}

div#video object {
  float: left;
}

div#bottombanner a {
  background-image: url("http://lorempixel.com/400/500/nature");
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  float: left;
}


/* for demo to avoid float to wrap */

body {
  min-width: 2000px;
}

<div id="bottom">
  <div id=video>
    <h2>Weekly Inspiration Song</h2>
    <p>Every morning, as we get up and bake all the goodies for you, we get inspired by great music!</p>
    <p>We want to share our inspiration with you, so we will update this section with our favorite inspiration song weekly.</p>
    <p>We hope you enjoy it like we do!</p>
    <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" height="315">
    </object>
    <br/>
  </div>
  <div id="bottombanner">
    <a href="menu.htm"></a>
  </div>
</div>

---

these are the two easiest and most css solid ways.

inline-block requires some extra tunning, grid is not well enough implemented yet, but will be so easy too to use.

---

About float, mind the block formatting context side effects when you use it.

Answer 2

http://imgur.com/a/BJUfh

if you just delete the <br> it aligns perfectly ;p

Answer 3

To start, I'd recommend that when you're debugging code you try right-click inspecting the elements. You can highlight over the DOM in the browser console and see the space the elements take up on the page. This will give you a good hint at where to start changing code.

Here are problems I noticed with your code:

1. You're floating the object left, which causes #bottombanner to jump up to the right, but you're not actually floating #bottombanner itself.
2. #bottombanner is not contained within the same parent as your object, which will make it very hard to do what you're trying to do without hacking things more than you really need to.

So the first thing we should do is move #bottombanner inside #video.

Then, kill the width on #video and have it just be 99% wide (since it has a 1% left margin). Take that width: 35% and apply it to your object instead.

Then, float both the object and #bottombanner to the left. With object at width: 35% and your container at width: 99%, that leaves 64% for the width of #bottombanner.

Also, remove display: inline-block on your object. display: inline-block and float: left are contradictory statements; you cannot float an inline element.

Full code is below. I didn't include a stack snippet since it seems the YT video doesn't load in the snippet, so you can't really see the full effect that way anyway.

HTML

<div id="bottom">
  <div id=video>
    <h2>Weekly Inspiration Song</h2>
    <p>Every morning, as we get up and bake all the goodies for you, we get inspired by great music!</p>
    <p>We want to share our inspiration with you, so we will update this section with our favorite inspiration song weekly.</p>
    <p>We hope you enjoy it like we do!</p>
    <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" height="315"></object>
    <div id="bottombanner">
      <a href="menu.htm"></a>
    </div>
  </div>
</div>

CSS

div#video {
  /*width: 35%;*/
  margin-left: 1%
  width: 99%;
}
div#video h2 {
  margin: 0;
  padding: 0px;
  font-family: 'StagSans-Book-Web', sans-serif;
}
div#video p {
  width: 560px;
  font-size: 16px;
  font-family: 'StagSans-Book-Web', sans-serif;
}
div#video object {
  /*display: inline-block;*/
  float: left;
  width: 35%;
}
div#bottombanner {
  float: left;
  width: 64%;
}
div#bottombanner a {
  background-image: url("http://placehold.it/720x560");
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  display: inline-block;
  float: left;
}