Creating two columns layout - html/css semantics

问题

I want to create a very simple liquid layout with 2 columns - the one to the left will have a fixed width, and the one to the right will be dependent to the window size.

The layout will contain 4 elements - the header, navigation, content, and the footer.

I have a couple of questions according to the semantics of HTML5 elements here.

This is the code:

<body>
   <div id="container">
       <header>
          <div id="header">
             sadfsdf
          </div>
       </header>
       <nav>
          <div id="nav">
             gdfsgf
          </div>
       </nav>
       <article>
          <div id="article">
             gdffgdg
          </div>
       </article>
       <footer>
          <div id="footer">
             gdfsgf
          </div>   
       </footer>
   </div>
</body>

1) Is container div really necessery? What I do is: HTML has font/lineheight properties BODY has some margins and background images CONTAINER contains the rest

Is it O.K. to put body stuff inside of html, and make body the container?

2) Are inner div's in header, nav, ... necessary? They are in there because I can then change padding, margins and borders without changing the width of the element. Should I rather set this width along with every changes?

回答1:

1) If the container div is needed or not depends very much on your actual design, but from what I can see from what you have showed, it is not really necessary. What is body stuff?

2) You have answered your question yourself. If you want to prevent an overflow because of padding, margin,border, keep it.

回答2:

The best method to have two/more columns in a layout is:

float the N-1 of columns
set margin to the other one

HTML

<div id="left">LEFT</div>
<div id="right">RIGHT</div>

CSS

div#left{
    float:left;
    width:200px;
    min-height: 400px;
    background-color: magenta;
}
div#right{
    margin-left: 210px;
    min-height: 400px;
    background-color: yellow;
}

take a look here

EDIT:

body is the High-level container which contains all the element is passed to the view. sometimes we need to position or form our whole elements in the page, without changing the position of each one comparing to each others. so being an element called container could be useful.

回答3:

Yes, you can use your body as your container.
You can get rid of your inner div-s as long as you use box-sizing: border-box; More about that here: http://css-tricks.com/box-sizing/

回答4:

One thing you can look into is using Scaffolding.

http://twitter.github.com/bootstrap/scaffolding.html This is from the fluid layout section. While it does not use a fixed span you could use nested containers.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/12914570/creating-two-columns-layout-html-css-semantics

标签

html

css

html5

semantics