Text not aligning next to image inside box - html

Question

This is the html for my box with the title text and image inside it.
<div id="about">
<div id="title"> <h3><b>About</b></h3></div>
<div id="text"><p>Text</p></div>
<div id="img"><img src="img/3.jpg" height="300" width= "400" alt="?">
</div>
and this is the css
#about {
color: white;
padding: 10px;
position: relative;
width: 90%;
height: 325px;
background: lightgrey;
top: 30px;
margin: 0 auto;
overflow: auto;
color: white;
background: #262626;
box-sizing: border-box;
}
#text {
width: 720px;
position: relative;
top: 30px;
float: right;
}
#title {
float: right;
position: relative;
right: 725px;
top: 0px;
}
#img {
}
My problem is that because my title is always 725px to the right, if I had a title larger than 5 letters it isnt right next to the picture or else I'll have to position it again, is there an easier way around this? Because doing it manually is frustrating.
Thanks.

Answer 1

You can solve this much easier using flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Put the title and text in a own wrapper .text-wrapper and place the img before the wrapper.
On your parent about use follow property, to place them each to other:
.about {
display: flex;
}
Some refactoring: You don't really ned a div around the image for this case. And I recommend you to use class in case of id. Check out the snippet:
.about {
display: flex;
}
.text-wrapper {
padding-left: 20px;
}
<div class="about">
<img src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" height="300" width="400" alt="?">
<div class="text-wrapper">
<div class="title">
<h3><b>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risu</b></h3>
</div>
<div class="text">
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
elementum sed sit amet dui.
suscipit tortor eget felis p
Sed porttitor lectus nibh.</p>
</div>
</div>
</div>

Answer 2

Try to remove floating from title and text and 'right' property from .title, then add 'float: left' to the picture.