Align image while keeping height
Question
I have an image, that I want to be aligned to one side of a div. I also have paragraphs that need to go alongside this image. However, they do not have enough text content to reach all the way down the height of the image. The content beneath the paragraphs I have needs to be below the image.
Using float:left for the image does not work, since the container div for the image with the desired alongside paragraphs does not respond to the height of floated elements.
Using position:relative; left:0px position:relative; left:0px for the image also does not work. With this, I have tinkered with the display of the paragraphs, but they always go beneath the image instead of beside.
h3 {text-align:center} img {position:relative;left:0px} p {display:inline-block;}
<body> <div> <div> <h3>Header Here</h3> <img src="http://www.devtano.com/software/eco/images/console.png"/> <p>This paragraph should be next to the image.</p> <p>This paragraph should also be next to the image.</p> </div> <div> <h3>Another Header</h3> <p>Everything from the above header and down should appear below the image.</p> </div> </div> </body>
Here is the Fiddle .
EDIT
After reviewing these answers, I found a more elegant solution:
h3 {clear:both; text-align:center}
img {float:left; margin-right:10px}
This takes the idea of clear fix and makes it more readily-applicable.
5 answers
solution1
2 2015-06-22 14:52:34
Remove inline-block (so they default to block ) from your p tags and then put your float:left; back in to your img tags. Also add float:left; and clear:left to the div tag so they always flow under one another.
https://jsfiddle.net/bowp6aea/3/
div {float:left;clear:left;} h3 {text-align:center} img {float:left;}
<body> <div> <div> <h3>Header Here</h3> <img src="http://www.devtano.com/software/eco/images/console.png"/> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p> <p> Vivamus auctor tortor sit amet ipsum volutpat, eu malesuada lorem euismod. Duis nec placerat nibh, vehicula gravida purus. Cras facilisis dictum elit vel gravida. Phasellus egestas eu mi nec cursus. Integer eget dui nibh. Nunc porta in tortor quis ullamcorper. Nulla tristique imperdiet ligula, vel dictum risus scelerisque sit amet. Phasellus elit metus, gravida vitae risus ut, faucibus vulputate mauris. Praesent eget magna sit amet sem bibendum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, ante sit amet elementum auctor, nulla mi iaculis tellus, et mattis nisi purus vitae sem. Vestibulum sit amet quam eget arcu congue commodo sit amet sit amet dui. </p> </div> <div> <h3>Another Header</h3> <p> Phasellus tincidunt enim ex, a dapibus nunc ultricies vitae. Integer interdum enim quis elit gravida auctor. Etiam non ullamcorper orci, eget luctus eros. Quisque posuere neque pretium urna accumsan, ac pellentesque erat dignissim. Maecenas at mi sapien. Proin lacus mauris, imperdiet bibendum orci sed, placerat ornare ipsum. Vivamus luctus quam id orci scelerisque, sed lobortis tellus finibus. Nam et eros sed arcu tristique tempus. </p> </div> </div> </body>
solution2
1 ACCPTED 2015-06-22 14:55:44
Updated the HTML as for in the demo , and apply these CSS class:
h3 {text-align:center; clear:both;}
img {float:left}
.inner-wrap p {display:inline;}
solution3
1 2015-06-22 15:09:41
what about using the attribute clear:both ? you just need to insert a simple <div class="clear"></div> and give it clear:both in CSS
.clear { clear: both } h3 { text-align: center } img { float: left; margin-right: 10px /*demo */ }
<div> <div> <h3>Header Here</h3> <img src="http://www.devtano.com/software/eco/images/console.png" /> <p>This paragraph should be next to the image.</p> <p>This paragraph should also be next to the image.</p> <div class="clear"></div> </div> <div> <h3>Another Header</h3> <p>Everything from the above header and down should appear below the image.</p> </div> </div>
solution4
0 2015-06-22 14:45:42
For simple image alignment with floating text you can use align="left within the image.
<p>
<img align="left" src="http://www.devtano.com/software/eco/images/console.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
solution5
0 2015-06-22 14:50:08
Try using on the container div:
display: inline-block;
Or you can float all the elements to the left:
float: left;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.