Text not aligning next to image inside box
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.
html css
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
add a comment |
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.
html css
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
add a comment |
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.
html css
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
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.
html css
html css
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
edited Nov 23 '18 at 14:39
Mr Shunz
79112127
79112127
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
asked Nov 23 '18 at 12:51
BigBoyPete_BigBoyPete_
32
32
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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>answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
add a comment |
Try to remove floating from title and text and 'right' property from .title, then add 'float: left' to the picture.
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447085%2ftext-not-aligning-next-to-image-inside-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
add a comment |
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>answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
add a comment |
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>answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
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>.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>.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>answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
edited Nov 23 '18 at 13:29
answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
answered Nov 23 '18 at 13:17
MrBuggyMrBuggy
1,66211748
1,66211748
add a comment |
add a comment |
Try to remove floating from title and text and 'right' property from .title, then add 'float: left' to the picture.
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
add a comment |
Try to remove floating from title and text and 'right' property from .title, then add 'float: left' to the picture.
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
add a comment |
Try to remove floating from title and text and 'right' property from .title, then add 'float: left' to the picture.
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
Try to remove floating from title and text and 'right' property from .title, then add 'float: left' to the picture.
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
answered Nov 23 '18 at 13:14
Artem GrachovArtem Grachov
1
1
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
add a comment |
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
I got this i.gyazo.com/a69a3e2327dab13770f916aa6abf10d5.png
– BigBoyPete_
Nov 23 '18 at 13:19
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
Try it: jsbin.com/dosafat/1/edit?html,js,output
– Artem Grachov
Nov 23 '18 at 13:25
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
@BigBoyPete_ also, do not forget to use clearfix to resolve problem when text div height is less than image's height
– Artem Grachov
Nov 23 '18 at 13:26
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447085%2ftext-not-aligning-next-to-image-inside-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
