Marvin Skow5E3D
New Member
I am a css newbie. I just draw a basic HTML page with following code:\[code\]<html> <head> <title>Hey</title> <link href="http://stackoverflow.com/questions/14068798/style.css" rel="stylesheet" type="text/css"> </head> <body> <header class="top-menu"></header> <div class="container"> <div class="left-side"></div> <div class="main-content"></div> </div> <div class="foot"></div> </body></html>\[/code\]Here is style.css:\[code\].top-menu{ position: fixed; top: 0; left: 70px; right: 70px; height: 50px; background-color: #000000;}.container{ margin: 70px 70px 20px 70px; display: inline-block; width: 91%;}.left-side { width: 30ex; min-height: 30ex; float: left; background-color: blue;}.main-content { width: 80ex; float: right; background-color: red; min-height: 100ex;}.foot { background-color: green; height: 5ex; width: 91%; margin-left: 10ex;}\[/code\]The purpose is straightforward.But the css looks crap.even some problems.I want to ask some questions:1.The left and right margin of container is 70px, and the same to top-menu, but from chrome page view,why does it not aligned?2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?3.If I don't set container's display to 'inline-block', why does the foot part flying to the air? (even I set it to 'block')4.Could you guys give me a better css style code?