A better way to write this HTML/CSS? - html

Question

I have a float left image with a title and a small text on it's right. My question is if there is a better way of writing it. I made a jsFiddle for this at http://jsfiddle.net/GjKTG/1/
this is the code without css
<div style="float: left;">
<div id="image">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
</div>
<p class="title">Here goes a title</p>
<div id="text">here goes two or more lines for content
</div>
</div>
Thank you

Answer 1

You'll probably get some varying answers. What you have isn't terrible, but I made an attempt at cleaning it up some: http://jsfiddle.net/GjKTG/18/. Some of this boils down to personal preference.
HTML
<div class="imageholder">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h3>Here goes a title</h3>
<p>here goes two or more lines for content</p>
</div>
CSS
.imageholder {float:left;}
.imageholder img { float: left; width: 50px; }
.imageholder h3 {color:#2D101F;font-family: georgia;}
.imageholder p { font-size: 11px; line-height: 13px;}
Changes:
Made the title into an h3 to give it some context. If something is a title, treat it like so.
Gave it one class and removed extra classes. Handling the rest with inheritance
Took out the inline styling
Got rid of the image wrapper div and handled that with CSS.
You'd possibly have some issues with the floats if you have multiples of these after another, but that's hard to say.

Answer 2

how about this:
html:
<div class="box">
<h1 class="title">Here goes a title</h1>
<div class="text">here goes two or more lines for content
</div>
</div>
css:
.title {
margin: 0;
color: #2D101F;
font-family: Georgia;
padding-bottom: 20px;
}
.text {
font-size: 11px;
line-height: 13px;
margin-top: -17px;
}
.box {
background: url("http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png") no-repeat top left;
padding-left: 40px; /* the width of the image */
min-height: 80px; /* the height of the image */
}
http://jsfiddle.net/ZYY9q/
and also remember, use ids as css selector is not a good idea actually.

Answer 3

Something like this perhaps? http://jsfiddle.net/SHFEb/
<div class="side-content">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" />
<h2>Here goes a title</h2>
<p>here goes two or more lines for content</p>
</div>
.side-content{float:left}
.side-content img{float:left}
.side-content h2{color:#2D101F;font-family:georgia}
.side-content p{padding-bottom:20px;font-size:11px;line-height:13px}

Answer 4

Something more semantic:
<article>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" alt="">
<h1>Here goes a title</h1>
<p>here goes two or more lines for content</p>
</article>
Which would be appropriate if you're using HTML5, since you didn't provide more context I assumed <article> would be the tag to use, but that depends on what your html-code represents in context.
updated jsFiddle: http://jsfiddle.net/nils_r/GjKTG/8/ … but you propably have to adjust it to suite more your needs.

Answer 5

If you wanted your markup to be a bit more semantic you could drop some of the divs as they're not really needed and use a header tag instead of a p tag for the title.
<div style="float: left;">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h2>Here goes a title</h2>
<p>here goes two or more lines for content</p>
</div>
You can then apply styles directly these elements:
div img {float:left;width:50px;}
div h2 {
color:#2D101F;
font-family: georgia;
}
div p {
font-size: 11px;
line-height: 13px;
}