Spencer Spencer - 6 months ago 10
HTML Question

Trouble with divs?

Okay, I'm very new to CSS and only minimally familiar with HTML so I'm still kind of fumbling around with both of them. I'm building a practice site and I can't figure out what I'm doing wrong here. My goal is to have the image box to the left of the header and paragraph, but have the title on the same line as the top of the image. Here's what I have:



<img src="" />
<div class="bios">
<h4>First Last</h4>
<p>This is my bio</p>
</div>





Paired with this CSS:


.bios {
height: 100px;
width: auto;
display: inline;
background-color: #a78ffc;
clear: left;
display: inline;
/** top, right, bottom, left **/
margin: 1px 1px 1px 10px;
/** top, right, bottom, left **/
padding: 1px 1px 1px 10px
}

img {
height: 100px;
width: 100px;
float: left;
clear: left;
display: inline;
}


I added the background color to really see what's going on in the preview and I'm more confused than ever. This is how it's displaying:

http://i1126.photobucket.com/albums/l618/spenciecakes/Screen%20Shot%202016-05-13%20at%2010.41.45%20AM_zps50dajzko.png

EDIT
Okay, I've added the additional code as requested and I've added the display: inline to both elements but honestly it all appears the same..

Answer

You can use display: inline-block.

CSS:

.inline {
  display: inline-block;
}

.title {
  font-weight: bold;
}
HTML:

<div>
  <div class="inline">
    <img src="http://placehold.it/50x50" />
  </div>
  <div class="inline">
    <div class="title">Item 1</div>
    <p>Item 1 description</p>
  </div>
</div>

<div>
  <div class="inline">
    <img src="http://placehold.it/50x50" />
  </div>
  <div class="inline">
    <div class="title">Item 2</div>
    <p>Item 2 description</p>
  </div>
</div>