Home/ Questions/Q 6930093
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:24:11+00:00

Hello I have created a basic layout in html and css, 1) Could you

  • 0

Hello I have created a basic layout in html and css,
1) Could you tell me if I can Improve the css or html?
2) I’d like the site to work in rages of 1024×768 and up.
3) How can I remove the horizontal scroll bars.
4) What is the simple meaning of the em unit?

Thanks:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="center">
    <div id="header">Title</div>
    <div id="nav">
    </div>
    <div id="warp">
        <div id="slider">#slider</div>
        <div id="posts">#posts</div>
        <div id="sidebar">#sidebar</div>
    </div>
    <div id="footer">#footer</div>
    </div>
</body>
</html>

css:

body{
    margin:0;padding:0;
    background-color:#ededed;
}
#header{
    height:150px;
    width:100%;
    background-color:#666;
    /*Text*/
    font-size:24px;
    background: #2989d8;
}
#center{
    margin:0 auto;
}

#warp{
    margin-bottom:10px;
    width:70em;
    background-color:#444;/*#e3e3e3;*/
    margin: -35px auto;
    overflow: hidden;
    margin-bottom:0px;
}
#slider{
    margin: 2em auto;
    width:65em;
    height:20em;
    background-color:#555;
}
#posts{
    float:left;
    width: 50em;
    height:50em;
    background-color:#111;
}
#sidebar{
    float:left;
    height:50em;
    width:20em;
    background-color:#777;
}
#footer{
    clear:both;
    height: 60px;
    width: 40em;
    margin:1em;
    background-color: #666;
    /*Text*/
    font-size:24px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I unfortunately don’t think this can be considered as a useful question for others, and I’m pretty sure you are using a template you are not sure how to work around. Here are the (quick) answers to your (quick) questions:

    1) The css and html look fine, except for the missing elements in the head. You should also give #center a width to make sure it works in all browsers.

    2) as Jawad mentioned, @media. You can find lots of information on this site or others. Check this.

    3) Not sure, difficult to see without a live example or http://jsfiddle.net/. Could be the overflow/widths.

    4) em= Unit of measurement in the field of typography, equal to the currently specified point size. Google.

    But if you are new to css, I recommend you visit these questions/answers or look for other ones so you can create good-looking and good-functioning websites.

    https://stackoverflow.com/questions/500827/what-css-tips-should-every-beginning-developer-know-about

    https://stackoverflow.com/questions/132587/the-best-css-tutorial-site-blog-book

    • 0