Home/ Questions/Q 9037905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T09:21:18+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0