<style type="text/css"> .container{ position:center; margin-left:500px; margin-right:500px; } header { height:200px; background-color:green; } footer { height:100px; background-color:red; } .body { display:flex; flex-direction:row; height:650px; } .side { background-color:yellow; flex:0.5; } .middle { background-color:teal; flex:2; } </style> </head> <body> <div class="container"> <header> i'm header idiot</header> <div class="body"> <div class="side"> stuff</div> <div class="middle">more stuff</div> </div> <footer>sheeeeeeeeeet</footer> </div> </body> i'm trying make webpage formatted this:
the code have botchy, way of doing doesn't scale window size , looks full screen relative screen size. missing? supposed centered on page , not have width spread across whole screen.
you have remove just:
.container { margin-left: 500px; margin-right: 500px; } from code solved issue.
check fiddle
and getting output same image(like center div). give parent text-align:center;. here body parent so.
body{ text-align:center; } check updated fiddle
Comments
Post a Comment