Chrome inspector and image at bottom of responsive div

Question

I have two questions.

First, which css rule will make a div be highlighted in the Chrome Inspector? All I know is that float: left, and overflow: hidden will make a div show up/highlighted in the Inspector. For example, in the code in the link below, when you use Chrome Developer Tools, and click/hover on <div class="center">, the area that was supposed to be highlighted didn't show. If you click/hover on <div class="content"> or <div class"image"> you can see the area that are highlighted in light blue.

Secondly, How do I keep the image stick to the bottom of the responsive div with content inside?

HTML

<div class="center">
  <div class="content">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.

Suspendisse ac porttitor purus. Duis consequat condimentum tincidunt. Donec rhoncus maximus diam, ac bibendum neque mollis vitae. Vivamus vel mauris vel ex vulputate porta. Praesent convallis elit odio, et vehicula quam vulputate vitae. Aliquam porttitor porta justo sed semper. Nunc tristique tellus arcu, id vestibulum mi gravida id. Nulla a interdum dolor. Aenean mollis purus ac sagittis semper. Nulla ipsum neque, blandit eu tempus eget, condimentum id erat. Mauris vitae nibh in arcu ultrices porta ut id nisi. Donec dapibus eros vulputate magna ultrices bibendum. Fusce libero dui, malesuada eget gravida ut, semper vel mi.

Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
  </div>
  <div class="image">
        <img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
  </div>
</div>

CSS

.center {width: 100%; position: relative; display: block; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; }
.content {width: 50%; float: left; position: relative;}

.image { width: 50%; float: left; position: relative; height: 400px;}
.image img { position: absolute; bottom: 0; right: 0; vertical-align: bottom;}

@media (max-width: 979px) {
  .content {width: 100%; float: left; position: relative;}

.image { width: 100%; float: left; position: relative;}
}

Code in action: http://codepen.io/kikibres/pen/MwBxBK

As you can see, for the image to stick to the bottom of the div, I need to specific the height of the div for the image to work. Otherwise, it just sit out of div on top / outside of div. How do I make it stick to the bottom while making the height responsive?

Additionally, if you use Chrome Inspector / Developer Tools on this code at codepen, you can also see that <div class="center"> isn't highlighted.

Answer 1

Position image at bottom of variable height div is a very good answer to my question. I just couldn't find it at first when I was searching for an answer before I post this question...

The key is .clear { clear: both; } in which you put <div class="clear"></div> after the first two divs inside the main div.

HTML

<div class="center">
  <div class="content">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.

Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
  </div>
  <div class="image">
        <img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
  </div>
  <div class="clear"></div> <!-- Where you should put it -->
</div>

CSS

    .center {width: 100%; position: relative; background-color: #dd1a83; }
.content {width: 50%; float: left; position: relative;}

.image { width: 50%; float: left; }
.image img { position: absolute; bottom: 0; right: 0;  border: 3px solid #000;}
.clear { clear: both; } /* Don't forget to put it there too*/

@media (max-width: 979px) {
  .content {width: 100%; float: left; position: relative;}

.image { width: 100%; float: left; position: relative;}
}

Answer 2

Ok here's my answer.

Please take a look at this fiddle first.

Answer to Question 1:

I believe it happens because of the wrong css usage. if you use float left, It won't take space unless it is cleared by using clear: left;.

Or you can use overflow: hidden on the parent container of the element with float:left.

Answer to Question 2:

Sorry but I have to remove unnecessary css to make the image stick to bottom in smaller screen. You can also achieve this using other approach but this is the easiest way for me.

html,
body{
   padding: 0;
   margin: 0;
}

.center {
    width: 100%;
    margin: 50px 0;
    padding: 15px;
    background-color: #63103C;
    color: #fff;
    overflow: hidden;
}
.content,
.image {
    width: 50%;
    float: left;
}

@media (max-width: 768px) {
    .content,
    .image{
        float: none;
        width: 100%;
    }
}