html - Align Text with Image in CSS -


i'm trying line text , image below title acting header, image keeps throwing off divider between entries , messing page's alignment. here's looks (django templates in use here)

here's code:

<script src="/static/js/downloadentry.js" type="text/javascript"></script> {% 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 couple of different techniques no avail. ideally looks this: http://jsfiddle.net/csazm/5/, within div container. like:

[title] [image, if 1 exists] [content] [divider] 

here's screenshot of how rendered:

screenshot

any suggestions? don't have experience frontend work (which apparent)

is looking 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; } 

Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -