I got the following code. The piece of code will be reused all over around. It’s working fine, but now I got a little problem and I’m not sure how to solve it.
When the text inside the paragraph is very wide and whatever contain the brief block is not that wide, the second div breaks and falls in the next line, and I don’t want the text in the next row, I want the text on the right of the image div.
A solution to the problem is to put a max-width in the childrens div, but like I said, the code is reused all over around, and I have very wide containers.
div.brief > div {
float: left;
}
div.image {
-moz-box-shadow: 0 0 5px #939393;
-ms-box-shadow: 0 0 5px #939393;
-o-box-shadow: 0 0 5px #939393;
-webkit-box-shadow: 0 0 5px #939393;
box-shadow: 0 0 5px #939393;
padding: 2px;
display: inline-block;
margin-right: 10px;
}
<div class="brief">
<div>
<div class="image"><a href="#"><img width="33" height="33" src="aaa.jpg" title="aaa" alt="aaa" /></a></div>
</div>
<div>
<p>Boudin drumstick pancetta, beef ribs filet mignon pork belly short ribs bacon...</p>
<label>By:</label> <a href="#" class="smallhighlight">Somebody</a>
</div>
</div>
Any tip?
don’t wrap your img/text in divs?
example here:
http://jsfiddle.net/ANNLP/2/