All geek questions in one place

Align image while maintaining height

I have an image that I want to align on one side of the div. I also have paragraphs that should go along with this image. However, they do not have enough text content to reach the maximum level of the image. The content under the paragraphs I need should be below the image.

Using float:left for an image does not work, because the container div for an image with the necessary paragraphs does not respond to the height of the floating elements.

Using position:relative; left:0px position:relative; left:0px for the image also does not work. With this I fiddled with the display paragraphs, but they always go under the image, not next.

 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 implies a clear correction and makes it more easily applicable.

+6
source share
5 answers

Updated HTML in demo and apply this CSS class:

 h3 {text-align:center; clear:both;} img {float:left} .inner-wrap p {display:inline;}
+1
source

Remove inline-block (therefore they are by default block ) from p tags, and then return float:left; into img tags. Also add tags float:left; and clear:left in the div tag so that they always flow into each other.

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>
+2
source

how about using the clear:both attribute? 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>
+1
source

To easily align the image with floating text, you can use align="left inside 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>

The spell is here .

0
source

Try using a div in the container:

 display: inline-block;

Or you can move all elements to the left:

 float: left;
0
source

Source: https://habr.com/ru/post/989534/

More articles:


All Articles