+ 2

How do I position these div tags ?

here is my code : <!DOCTYPE html> <html> <head> <title></title> <style> #Top{ width:100%; margin: auto; height:100px; position:relative; background-color: red; } #left{ width: 10%; height: 600px; padding-left: 0px; position: relative; display:inline-block; float: left; background-color: yellow; } #right{ width: 10%; height: 600px; margin-left: 79.98%; display: inline-block; float: rigth; background-color: yellow; } #bottom{ width: 79.4%; height: 50px; margin-left:10.1%; margin-bottom: 50px; display: inline-block; background-color: green; } body{ background-color: blue; width:99.4%; } </style> </head> <body> <div id="Top"></div> <div id="left"></div> <div id="right"></div> <div id="bottom"></div> </body> </html> I want the outcome to be like-: http://www29.zippyshare.com/v/TwMDkO61/file.html

html5 css3 website

17th May 2017, 7:27 PM

Sisa

4 Answers

+ 3

Try this; <head> <title></title> <style> #Top{ width:100%; height:100px; background-color: red; } #left{ width: 10%; height: 650px; float: left; background-color: yellow; } #right{ width: 10%; height: 650px; float: right; background-color: yellow; } #bottom{ width: 80%; height: 50px; margin-top: 600px; position:absolute; display: inline-block; background-color: green; } body{ margin: 0; background-color: blue; width:100%; } </style> </head> <body> <div id="Top"></div> <div id="left"></div> <div id="right"></div> <div id="bottom"></div> </body>

17th May 2017, 8:15 PM

Adem Şahin

+ 1

good answer @Adem but it would be batter to float both #left and #right to left #right,#left{float:left;} in order to appear next to each other if it's not what you wanted to do , so you did it correctly

17th May 2017, 8:33 PM

Abdel