CODEWITHSUNDEEP
htmlcss
Spencer
Spencer

Reputation: 21

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..

Upvotes: 0

Views: 70

Answers (3)

BCDeWitt
BCDeWitt

Reputation: 4773

The negative margin trick works like a charm (Explanation in code comments)

.bio {
  overflow: hidden; /* Prevent negative margin from leaking out */
}

.bio-inner {
  overflow: hidden; /* Clearfix */
  margin-left: -1em; /* A) Remove spacing between items when they are against the left side (Must be negative B) */
}

.bio-thumbnail {
  height: 3em;
  width: auto;
  background-color: #a78ffc;
}

.bio-thumbnail,
.bio-info {
  float: left;
  margin-left: 1em; /* B) Add spacing between items (Must be positive A) */
}

.bio-info-heading {
  margin: 0em; /* Just removing default margins */
}

.bio-info-text {
  margin-top: 0.5em;
}
<div class="bio">
  <div class="bio-inner">
    <img class="bio-thumbnail" src="https://i.sstatic.net/7bI1Y.jpg">
    <div class="bio-info">
      <h4 class="bio-info-heading">First Last</h4>
      <p class="bio-info-text">This is my bio</p>
    </div>
  </div>
</div>

This, I have found, works best in cases where screens may be too small to fit the image and text side-by-side.

Upvotes: 1

user4262528
user4262528

Reputation:

You can use display: inline-block. 

.inline {
  display: inline-block;
}

.title {
  font-weight: bold;
}
<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>

Upvotes: 0

Pandaqi
Pandaqi

Reputation: 144

I can't solve your problem with only the code you provided (what's the code for the images?), but I can tell you what's wrong with the current code. First, in order for the width and height property to work, the display property needs to be set to either inline-block or block.

Secondly, the float property does not have a value center. It can only take the values left and right (you need to the first one in this case).

Upvotes: 1

Related Questions