css - How to align this html layout properly? -
css - How to align this html layout properly? -
hi iam trying remove these white spaces (green circles in image) , dont best way it. can margin-left -ve value , width more 100% there way solve issue in proper way .
here html code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>hachi</title> <link rel="stylesheet" href="css/style_rec.css" type="text/css" /> </head> <body> <style> #container{ font-family: "proxima-nova", helvetica, arial, sans-serif; font-weight: normal; color:#414141; -webkit-font-smoothing: antialiased; height: auto; width: 100%; } #header{ width: 100%; height:100px; background-color: red; } #left_panel{ width: 50%; float: left; /* height: 400px; */ background-color: green; } #right_panel{ width: 50%; float: left; /* height: 400px; */ background-color: blue; } #bottom_logos{ width: 100%; height:100px; background-color: yellow; } </style> <div id="container"> <div id="header"></div> <div id="left_panel"> kjjjhjfhklhhhkh dfdsfdsfsdfdsf </div> <div id="right_panel"> ewrewrewrewrewr ewrwerewrwerewr </div> <div id="bottom_logos"></div> </div> </body> </html>
screenshot
those margins part of way browser renders content default.
you can remove them using body, html { margin: 0px; }
.
i recommend utilize css reset.
html css layout alignment margin
Comments
Post a Comment