I cant get the text to stay in the div | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

I cant get the text to stay in the div

the text wont stay in the div: html: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="Learn.css"/> </head> <body> <div id="NavBar"> <a href="https://www.youtube.com/channel/UC-kNQZyspQY1OUKMalbx_uQ"> <img src="https://s-media-cache-ak0.pinimg.com/originals/dc/4d/23/dc4d238b3da6d02bcc5080b58fd5c009.jpg" id="Logo"/></a> <p id="Title">ANGEL ARMY WEBPAGE</p> </div> <script src="Learn.js"></script> </body> </html> css: #NavBar { background-color: #c4c5c6; width: 1837px; height: 100px; } #Logo { width: 100px; height: 100px; } #Title { font-size: 50px; font-family: "Times New Romans", "serif"; text-align: center; margin: 0px; width: 1437px; height: 58px; } PLEASE HEELLLP

3rd Jul 2017, 10:32 PM
Joshua
Joshua - avatar
7 Answers
+ 5
Problem was, p was pushing it down a line. Replaced with I tags and displays fine... tho I think there's a better answer, that's what I came up with for you off the top of my head. https://code.sololearn.com/WzH8zG9fNXs7/?ref=app BTW 1875px is super duper wide on mobile
3rd Jul 2017, 10:42 PM
Russel Reeder
Russel Reeder - avatar
+ 15
Easiest way is to float your image, in your case it's enough! img { float: left; }
3rd Jul 2017, 10:40 PM
Maz
Maz - avatar
+ 10
Nice one @Russel, cleaner than my solution, just one more thing... <i> as maybe you already know is an inline element, so... you can remove most of that lines and get the same output: #Title { font-size: 50px; font-style: normal; font-family: "Times New Romans", serif; }
3rd Jul 2017, 10:52 PM
Maz
Maz - avatar
+ 3
@Joshua, @maz & @russel, instead of <i> or the <p> tags, the span tag might be better, then you wouldn't have to worry about coding the font-style to normal or extra coding at all in css edit --- another solution: https://code.sololearn.com/WyYsMqV9Ouv0/?ref=app
4th Jul 2017, 12:11 AM
Dustin Hammack
Dustin Hammack - avatar
+ 2
another simple trick is to set the display to 'inline' for the '#Title' id display: inline; https://code.sololearn.com/W8p7iRQe1lzv/?ref=app
3rd Jul 2017, 10:53 PM
Mame86
Mame86 - avatar
+ 2
At that point u would need overflow-y: auto; as well, to scroll to the text @Andrew. It would hide the content
4th Jul 2017, 12:01 AM
Russel Reeder
Russel Reeder - avatar
+ 1
its made for computers
3rd Jul 2017, 10:55 PM
Joshua
Joshua - avatar