How can I align the paragraphs in this div with pure CSS? - html

Question

JSfiddle
I have a situation where I would like to float a small image to the left of text within a div. I don't want the text to wrap under the image, and some research led me to add the overflow:hidden; property on <p>. While this makes the paragraph next to the image behave as I want, the following paragraphs are then not aligned with the first. Is there a nice way to get all paragraphs aligned? I tried display: table-row;, but this affects other elements on the page (and I have read up on why this is the case).
I need to work within the constraints present in the JSFiddle (i.e., can't really modify html), and cross-browser support is a priority.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
overflow: hidden;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>

Answer 1

Use a margin-left on the paragraphs that is the width of the image + the margin/space you want between the image and paragraph. Then you have no need for the overflow.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
margin: 0 0 1em 55px;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>

Answer 2

So, you should set a div for the whole thing, one for the image and one for the text.
I don't know if that's what you're looking for, but here you go.
.container {
width: 400px;
height: auto;
}
.imageDiv {
max-width: 200px;
height: auto;
float: left;
}
.image {
max-width: 100%;
}
.text {
max-width: 200px;
min-width: 200px;
text-align: center;
float: left;
}
<div class="container">
<div class="text">
<p>
Some text.
</p>
</div>
<div class="imageDiv">
<img class="image" src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg">
</div>
</div>

Answer 3

Code the one div for other content and manage that two inside div like you want.
<div class="header">
<div class="img">
</div>
<div class="other">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
</div>