Align Text with Image in CSS

Question

I'm trying to line up text and an image below a title acting as a header, but the image keeps throwing off the divider between entries and messing up the page's alignment. Here's what it looks like (Django templates in use here)

Here's the code:

<script src="/static/js/downloadEntry.js" type="text/javascript"></script>
{% for entry in entries %}
  <div class="entry">
      <label class="titleText">{{ entry.title }}</label>
      <div class="contentContainer">
        {% if entry.image %}
            <img class="image" src="{{ entry.image.url }}">
        {% endif %}
        <p class="contentText">{{ entry.content }}</p>
      </div>
      <script>styleTitle("{{ entry.title }}");</script>
  </div>
  <hr class="entryDivider">
{% endfor %}

The relevant CSS:

.entryDivider {
    margin-top: 10px;
    size: 1px;
    width: 66%;
}
.entry {
    width: 66%;
    margin-top: 30px;
    margin-bottom: 10px;
}

 .titleText {
    font-family: "Helvetica Neue";
    font-size: 24px;
    font-weight: bold;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
 }

.contentContainer {
    width:100%;
    display: block;
}

.contentText {
    font-family: "Helvetica Neue";
    font-size: 14px;
    text-align: left;
    font-weight: 200;
    display: block;
    overflow: hidden;
}

.image {
    float: left;
    display: block;
    background-color: #ff0000;
    margin-right: 15px;
    width: 90px;
    height: 80px;
}

I've tried a couple of different techniques to no avail. Ideally it looks something like this: http://jsfiddle.net/cSazm/5/, but within the div container. Something like:

[Title]
[Image, if one exists] [Content]
[Divider]

Here's a screenshot of how this is rendered:

screenshot

Any suggestions? I don't have much experience with frontend work (which is probably apparent)

[This may help you](http://stackoverflow.com/questions/13408394/how-to-vertically-align-both-image-and-text-in-a-div-using-css/13408897#13408897). — The Alpha, Aug 15 '13 at 19:18

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

In your containing div (in this case .entry), you can clear it:

.entry {
    width: 66%;
    margin-top: 30px;
    margin-bottom: 10px;
    clear: both;
}

However, I recommend using something known as a clearfix:

.entry::after {
    content: '';
    display: table;
    clear: both;
}

This way, anything after the .entry will be cleared automatically.

As a side note, I recommend removing the hr elements and using border-bottom on the .entry.

See jsFiddle.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 15 '13 at 19:21

rink.attendant.6

44,500
61
101
156

This also worked well. Thank you for the advice on the divider as well – drodman Aug 15 '13 at 21:13

score 1 · Answer 2 · answered Aug 15 '13 at 19:22

Is this what you are looking for?

.content {
width: 100%;
}

.image {
    float: left;
    padding-right: 5px;
}

.entryDivider {
    margin-top: 10px;
    size: 1px;
    width: 66%;
}

http://jsfiddle.net/XZ2Ax/

Just put everything in a div above the divider.

score 0 · Answer 3 · answered Aug 15 '13 at 19:20

after floated elements you should have a clearing element so that the floats dont "mix"

CSS

.clearfix {
   clear:both;
   height:0px;
}

HTML

<div>
    <img src="http://lorempixel.com/g/80/80/"  />

    <p>
    Lorem ipsum dolor sit amet, 
    </p>

</div>    
<br class="clearfix" />
<div>
    <img src="http://lorempixel.com/g/80/80/"  />

    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>

</div>

JSFiddle

score 0 · Accepted Answer · answered Aug 15 '13 at 19:20

Is this what you are looking to do? JSFiddle

div{
    display: block; 
    width: 100%;
    overflow: hidden;
    padding:10px 10px 0;
}    

h2 {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
}
img{
    float:left;
    margin-right: 10px;
    vertical-align:top;
}    

p{
    display: block;
    overflow: hidden;    
}    

div hr {
    clear: both;
    border: none;
    padding-top: 5px; 
    margin:0;
    border-bottom: 1px solid #ccc;
}

Align Text with Image in CSS

4 Answers4