Creating two columns layout - html/css semantics

Question

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.

Answer 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.

Answer 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.

Answer 3

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>

Answer 4

1. Yes, you can use your body as your container.
2. 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/