Css布局系列——圣杯布局

圣杯布局是一种三列布局，两边定宽，中间自适应布局：

STEP1:Create dom struction

<div id="header"></div>
　　<div id="container">
  　　　　<div id="center" class="column"></div>
  　　　　<div id="left" class="column"></div>
  　　　　<div id="right" class="column"></div>
　　</div>
<div id="footer"></div>

STEP 2: Create the  frame and pad the container with the width we want our left and right columns to occupy

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}

STEP 3: Give the colums to add apropritate width and float them to get them inline 

#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;  /* LC width */
}
#right {
  width: 150px;  /* RC width */
}
#footer {
  clear: both;
}

STEP 4:Get the left colum to line up with the pading-left on the container

Stetp 4.1:we`ll put it all  the way across the center colums with a 100% negative margin　　

#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
}

Stetp 4.2:we`ll use relative postioning with an right offset the width of the  left colum

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
  right: 200px;        /* LC width */
}

STEP 5:Get the right colum to line up with the pading-right on the container

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

STEP 6:Design defensively , Seting the min-widh on the body keeps our colums in place when the browser window is resized

body {
  min-width: 550px;  /* 2x LC width + RC width */
}

here , the simply he holy grail mode is finished ,but the layout offends even my aesthetic sensibilites , so we need whitespace , and Pading will be added to the  colums

STEP 1:Pading is added the left column ,Keep the full width at 200px

#left {
  width: 180px;        /* LC fullwidth - padding */
  padding: 10 10px;
  right: 200px;        /* LC fullwidth */
  margin-left: -100%;
}

 

STEP 2:Pading is added to the center padding

Add padding at conter column 

#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}

drawback1:padding plus a width of 100% cause the center column to expand beyond the non-padding width of the container ,

solution:we need increase the padding-right of the container ,This ensures that the center column is only as large as we expect it to be

#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}

drawback2：the left column do`t pull into the place

solution:we will pull the left column into place , then ,we will use relative position with  an right offset the width of the  left colum plusing double padding (40px)

#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}

note:why is the double padding , as following ;

 

drawback3: the right column do`t pull into the place

solution:as following

#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}

here,we finnished improving the aesthetic feeling ，the whole code

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}

参考资料：http://alistapart.com/article/holygrail