HTML Containers and Positioning

Question

I just started to make a static website after years of not playing in that field (I stopped in the early 2000s) just to try to remember what I lost over time. Before going any further, I wanted to know if the way I'm building my page is working alright. It can be seen at http://kaivoslab.site44.com/.

I tried to keep it logical, so I would have a div that would just be my whole page container (id container), within which I would put a top strip (id header), a middle strip (id inner) and a bottom strip (id footer). Then, within each of these id, I added added what I think is called wrapper within which I added the objects I need to display.

So, the disposition goes something like this:

<div id="header">
  <div class="container">
    <div id="title">
      ...
    </div>
    <div id="navbar">
      ...
    </div>

  </div>
</div>

<div id="inner">
  <div class="container">

    <div id="content">
      <div id="feed">

        <div class="post">
          <h2 class="title">
            ...
          </h2>
          <div class="meta">
            ...
          </div>
          <div class="entry">
           ...
          </div>
        </div>
        <hr>

      </div>
    </div>

    <div id="sidebar" align=center>
      ...
    </div>  

  </div>
</div>

<div id="footer">
  <div class="container">
    <div id="top">
      ...
    </div>
    <div id="copyright">
      ...
    </div>
  </div>
</div>

Is this overkill?

I've also set this CSS stylesheet to go with all this:

/* The whole page body */
body{
background-color:rgb(255, 255, 255);
margin:0px;
padding:0px;
font-size: 14px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

img{
box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);    
}

/* unvisited link */
a:link {
color: #004349;
text-decoration: none;
}   

/* visited link */   
a:visited {
color: #004349;
text-decoration: none;
}  

/* mouse over link */
a:hover {
color: #B85700;
text-decoration: none;
}  

/* selected link */
a:active {
color: #B85700;
text-decoration: none;
}   

/* The whole page titles */
h1{
color:rgb(255, 255, 255);
text-shadow: 0px 2px 5px rgba(125, 125, 125, 1);
}

hr{
box-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
margin-top: 20px;
}

code{
font-family: 'Consolas', 'Incosolata', 'Monaco';
}

/* Whole page container/wrapper */
#container{
white-space: nowrap;
}

/****************************************************************
/ HEADER
/***************************************************************/
/* The top stripe of the page */
#header{
background-image: url('../img/triangles.png');
box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
margin: 0px;
}

/* The container within the header */
#header .container{
margin-right:5%;
margin-left:5%;
width: auto;
}

/* The title within the header's container */
#title{
width: auto;
margin: 0px;
display: inline-block;
}

/* The navbar within the header's container */
#navbar{
width: auto;
margin-top: 57px;
float: right;
}

#button{
text-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
color: rgb(255, 255, 255);
display: inline-block;
height: 24px;
width: 70px;
background-color: #004349;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
border-radius:10px;
text-align: center;
padding-top: 5px;
}

/****************************************************************
/ INNER
/***************************************************************/
/* The middle stripe of the page */
#inner{
margin: 0px;
}

/* The container within the inner */
#inner .container{
margin-right:5%;
margin-left:5%;
}

/* The content within the inner's container */
#content{
width: 80%;
margin-top: 20px;
display: inline-block;
}

/* The column containing all the posts */
#feed{

}

/* A single post container */
.post{

}

/* A single post title */
.title{

}

/* A single post metadata */
.meta{
font-weight:bold;
}

/* A single post body */
.entry{
white-space: normal;
width: 100%;
}

/* The sidebar within the inner's container */
#sidebar{
vertical-align: top;
width: 20%;
margin-top: 20px;
display: inline-block;
}

/****************************************************************
/ FOOTER
/***************************************************************/
/* The bottom stripe of the page */
#footer{
margin-top: 20px;
}

/* The container of the footer */
#footer .container{
margin-right: 5%;
margin-left: 5%;
}

#top{
display: inline-block;    
}

#copyright{
float: right;
}

I see that I can control the appearance of the page with either id, class or with the markup. Which should be used when? At least, for the markup it is easy to see that it applies to the whole page, but can be overwritten from an id or class. However, which between class and id should be used in which context? Is the code I've done decent enough in this regard?

Lastly, I noticed that this doesn't render the same way between browser. Is it related to the way I dealt with the containers and such? Is there a way to deal with that without having to do a stylesheet for each different browser?

Answer 1

The best way to make your code minimal and keep all browsers aligned is to use some front-end framework.

The most popular and widely used framework is bootstrap from Twitter. This will handle all nitty gritty things for you and provide you some scaffolding options(to define columns easily for vertical positioning of divs).

You don't need to write code basic CSS things and most commonly used JavaScript features, so you will not need to reinvent the wheel. However, I am listing all options as well.

1. Bootstrap
2. Foundation
3. Modernizer
4. HTML5 boilerplate

All of them are open source and hosted in github. Github repositories can show how popular they are.

Answer 2

As you are using HTML5, you could make use of the elements header and footer and the sectioning elements section, article, nav and aside.

Don’t use align=center. It’s non-conforming. Use CSS instead.

When you need to add hooks for styling in your HTML, use the class attribute instead of the id attribute. Use id for page anchors and possibly JavaScript.