How to optimize this css code?

Question

I am a css newbie. I just draw a basic HTML page with following code:

<html>
  <head>
    <title>Hey</title>
    <link href="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>

Here is style.css:

.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;
}

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?

score 0 · Accepted Answer · answered Dec 28 '12 at 11:42

0

I understand that you prefer to use CSS3 and the latest html standard but the <header> tag has not been adopted by that many browser vendors. I would stray away from using it. IE9 is the first IE to adopt it and there is plenty of users still on IE6/7.

Take <header> out and replace with a normal <div class="header">...</div> and then reference using css .header { }.

To answer #2 - you can not state width: 100%; and then add left/right margins and not expect a horizontal scroll bar. In principle, the container will span beyond 100%.

I am not sure why you are adding display: inline-block; to the container div. Only inline elements should ever have this declaration (i.e. text elemnts). Is there a specific reason why so?

Also, when you are first creating an html template and testing it out, make sure that you always add content into the divs and not simply leave them blank. Adding min-height: ... is not a fool-proof system. I always add in fake text - "hello hello" suffices.

Lastly, add an appropriate html doctype. Perhaps you trimmed it for the question part but is this xhtml or html? This relates further with the use of <header>. Not all doctypes support <header.

answered Dec 28 '12 at 11:42

ProfileTwist

1,524
1
13
18

Thanks for your advices. I just got ride of all the min-height from all of the elements.The reason I have to state display of container is that foot part would overlapping to the container part if I just get ride of display attribute. any ideas? – LeoShi Dec 28 '12 at 12:04
3

There aren't that many people using IE6/7 anymore. 0.3& IE6 and 1.2% IE7. Most IE users use IE8, but the OP can always use something like ie9.js to force compatibility with HTML5 elements. – Kyle Dec 28 '12 at 12:08
Thank goodness that no more than 0.3% use IE6. I was simply alluding to the idea that adoption of html5 will take time and in this transition period we must be wary of certain html tags `
` that might not work as expected.
– ProfileTwist Dec 28 '12 at 12:13
IE6 is not a good enough reason to recommend replacing semantic markup with divs, especially when it takes a modest amount of JS to make it work. P.S. http://www.ie6countdown.com/ – cimmanon Dec 28 '12 at 12:52
IE6 is not the reason for the recommendation; IE9 is the first to support `
` meaning that IE8 does not support it. P.S> http://theie8countdown.com/
– ProfileTwist Dec 28 '12 at 13:23

score 0 · Answer 2 · answered Dec 28 '12 at 11:44

0

2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?

Because, you have margin which makes the total width more than 100%.

answered Dec 28 '12 at 11:44

ATOzTOA

34,814
22
96
117

Thanks dude. Is it mean if I want to align container part with top menu part, I have to set width to a magic number? – LeoShi Dec 28 '12 at 11:57
No you can always use percentages, but keep in mind that margins / border always adds to the total width of the element. Just set everything to be within like 98%. – ATOzTOA Dec 28 '12 at 13:00

TKrugg · Answer 3 · 2012-12-28T12:12:49.137

Apart from what's been already said, have you tried to use the chrome inspector to tackle theses issues? Just point the mouse on the page, right click and choose Inspect Element. There you can enable/disable some CSS properties and quickly find out what's wrong. For firefox, the equivalent is http://getfirebug.com/

As for your layout problem: don't worry, this has been a real pain for all of us when we've started. If your point is not to actually learn css, if all you want is to make this to work once and for all and in time, my advice is: use a CSS framework with a grid.

CSS frameworks have usually a neat feature we call "the grid". It will allow you to set a layout like yours in 5 minutes, and stop worrying about how this div floats in this or that browser.

Plus: this depends of the website you want to use, but usually when you use a grid, what you do will by sexy magic look less amateur. (if you have a designer background maybe you already know this)

Take a simple Framework to start. Everyone has its favorite but I can recommend BluePrint to start. And here is a small demonstration of its grid system super powers ;)

Thanks dude. I know how to use Twitter bootstrap and other gird system. But I just want to learn real css now. — LeoShi, Dec 28 '12 at 12:12

How to optimize this css code?

3 Answers3