Instead of using floats, set the widths to a percentage and the display to inline-block.
.statement, .aboutpic{
width:50%;
display: inline-block;
}
This should allow the divs to sit side-by-side.
Solution 1 :
Solution 2 :
You can add display:flex to your .container style. This also helps the div to adjust it’s width based on content, and you do not need to declare width or float values.
The padding is optional.
Hit the Run code snippet button to see it work.
.container {
width: auto;
display: flex;
}
.statement, .aboutpic {
border: 1px solid black;
padding: 1em;
}<section class="container">
<div class="statement">
<h2>
Title
</h2>
<p>
Aliquam sapien nunc, ullamcorper ut risus in, maximus condimentum velit. Duis consequat varius nibh, non malesuada ligula auctor sed. Aliquam a mollis purus. Proin in nunc eros. Phasellus nec sem velit.
</p>
<p>
Vestibulum massa mi, gravida at dapibus id, elementum quis augue. Nam tristique lobortis nunc non tristique. Donec quis bibendum massa. Ut sit amet augue efficitur, tincidunt enim sit amet, efficitur nisl.
</p>
</div>
<div class="aboutpic">
<img src="https://via.placeholder.com/250/cdf" alt="demo">
</div>
</section>Problem :
Im working on an about page and i want to put my picture next to the paragraphs, im just struggling to get the divs to be next to each other.
this is my html
Please help me i’m a beginner and need some help.
Comments
Comment posted by stackoverflow.com/editing-help#code
Please add your HTML and CSS in the code block instead of images. You can find more information about how to do that here –
Comment posted by Michael
That did the trick! thank you so much!
Comment posted by Michael
that worked a little bit but it jumbled my sections around…