+ 1

Why is my orange box not lined up...

I am new...learning...my html/CSS is below...when I run the code the "orange" box is offset just a little and I can't figure out why...its the same as the green box...Can someone help... <!Doctype html> <html> <head> <title>Just Playing Around </title> <link href="MyCSS.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="purple"> <nav> <list>Home</list> <list>History</list> <list>Future</list> </nav> </div> <div id="green"> <h1>This box will be green in color!</h1> <p> This paragraph will be in the blue box. I am curious to see if this has a break in it or not. Now is the time for all good men and wome to come to the aid of their country.</p> </div> <div id="blue"> <h1>This box will be blue</h1> <p>This paragraph will be in the blue box. I am curious to see if this has a break in it or not. Now is the time for all good men and wome to come to the aid of their country. </p> </div> <div id="orange"> <h1 style=color:red;>This box will be orange in color!</h1> <p style=color:red;> This paragraph will be in the orange box. I am curious to see if this has a break in it or not. Now is the time for all good men and wome to come to the aid of their country.</p> </div> <div id="silver"> <h1>This box will be silver!</h1> <p>This paragraph will be in the silver box. I am curious to see if this has a break in it or not. Now is the time for all good men and wome to come to the aid of their country. </p> </div> </body> </html> CSS is as follows... body {background-color:linen;} #purple{border:1px solid black; height:50px; width:100%; background-color:purple;} #blue {margin:5px 0px;border:2px solid black; height:400px; width:50%; background-color:RGB(124,146,167);} #green {margin:5px 0px;float:right; border:2px solid black; height:400px; width:48%; background-color:RGB(96,144,96);} #orange{margin:5px 0px;float:right; border:2px solid black; height:400px; width:48%; background-color:RGB(255,168,52);} #silver{margin:5px 0px;border:2px solid black; height:400px; width:50%; ba

html css question help

26th Jun 2017, 2:10 AM

Joshua Prentice

3 Answers

+ 4

Finding the complete code in your profile playgroud ;) https://code.sololearn.com/W15NrTWN9IAw/?ref=app "float' behaviour can be poweful, but is not obviously predictable ^^ Seems that's the little offset is due to your little margin set at the element '#orange': you can fix it by setting 'margin:0' rather than 'margin:5px 0'... but the question is now: why the '#green' box don't have the same offset problem? ;P Anyway, 'float' is not necessarly the better way to implement a such layout... as 'float' element are not easy to control inside the content stream (as 'positionned' element, they are removed from the 'normal' stream and are displaying independently overlay...

26th Jun 2017, 2:43 AM

visph