Menu
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 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.
490
The height and width of an image can be set using height and width attribute. The height and width can be set in terms of pixels. The <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
HTML | <img> align Attribute The <img> align attribute is used to set the alignment of an image. It is an inline element. It is used to specify the alignment of the image according to surrounding elements.
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>
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;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With