My text goes to the left when it exceeds the image height
I have a problem with my css, when my paragraph is long, I want my text to continue to align with my test that is next to the image.
But Im not having this, Im having my text go to the left when it exceeds the height of the image as you can see in my image.
And also I have a space marked with a circle in my picture below and I don't understand why.
Do you know how I can get an effect like this shot below?
I forgot to create a script with my problem: http://jsfiddle.net/ejjtepfo/2/
My Html:
<div class="modal">
<h2>Title of news</h2>
<span id="data">20/10/2014</span><br />
<img class="img" src=""/>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<div class="clear_p"></div>
<div id="pdfs">
<h3>Links</h3>
<ul class="links">
<li> <a href=""></a>Link 1</li>
<li> <a href=""></a>Link 2</li>http://jsfiddle.net/#tidy
<li> <a href=""></a>Link 3</li>
</ul>
</div>
</div>
source to share
DEMO: http://jsfiddle.net/wL6jua0L/
Uses window size: border, padding and negative margin. Assumes that, as in the OP, the image is fixed at 200px wide, which means that with a border of 5px, you add the actual width you want, since the border contains borders and padding. Regarding the space below it in another screenshot, if you change the height of the paragraph line to 24px, it won't be there, or you can control the height of the image. Google vertical rhythm and images.
.modal .img {
width:210px;
height:230px;
border:5px solid #f3f3f3;
margin:18px -220px 0 0;
box-sizing:border-box;
float:left;
}
.modal p{
box-sizing:border-box;
font-size: 16px;
text-align:left;
line-height:25px;
float:left;
padding:0 10px 0 230px;
}
source to share
You can wrap a paragraph in a div tag:
<img src="http://www.peacethroughpie.org/wp-content/uploads/2013/09/baked-pie.jpg">
<div><p> ... </p></div>
Then you can set the div to 100% width - the width of the image and position it to the right.
img {
float: left;
width: 20%;
}
div {
display: block;
width: 80%;
float: right;
}
It will look like this: http://imgur.com/zL5v33z
source to share