CSS Layout 3 cột với kích thước cố định (Fixed): Left, Content, Right

Kiểu bố cục: Fixed (cố định kích thước)
Số cột của trang : 3 cột
Quy định các cột : fixed – fixed – fixed

Layout này bao gồm 3 cột được cố định kích thước (Fixed), với chiều rộng mặc đinh của trang là 840px. Với các cột: bên trái cố định, nội dung ngầm định và bên phải cũng cố định như bên trái.

Đây là layout được sử dụng nhiều nhất trong các trang web cổ điển: cơ quan, giáo dục, bán hàng…

3column-fixed

Ở layout trên: Kích thước toàn trang là 840px, kích thước cột trái 180px, cột phải là 190px nên :

  • Phần content sẽ margin-left 180px và margin-right 190px.
  • Cột bên trái sẽ margin-left là -840px  , margin bằng số âm của kích thước trang
  • Cột bên phải sẽ margin-lefft bằng số âm chính kích thước của nó

CODE LAYOUT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Layout: 3 cột cố định kích thước (Fixed) - Left, Content, Right</title>
<style type="text/css">

body{
 margin:0;
 padding:0;
 line-height: 1.6em;
 font-family: arial;
 font-size: 14px;
 background: #ada189;
}

b{font-size: 110%;}
em{color: red;}
ul {padding-left: 20px;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background: #fff;
}

#topsection{
background: #dccbaf;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 25px;
}

#contentwrapper{
float: left;
width: 100%;
text-align: justify;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
border-right: 1px solid #ccc;
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
border-right: 1px solid #ccc;
background: #faf6f0;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #f8f4ec;
}

#footer{
clear: left;
width: 100%;
text-align: center;
padding: 20px 0;
border-top: 3px solid #999;
}

#footer a{
color: #575551;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["Đây là nội dung demo", "Chào mừng đến với WebtopViet.com", "Học Thiết kế website chuyên nghiệp, Đào tạo SEO Google"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
var text2 = ["Học Thiết kế website"]
function fill_menu(words){
 document.write("<ul>");
 for (var i=0; i<words; i++)
 document.write("<li>" + text2 + "</li>")
 document.write("</ul>");
}
var text3 = ["Đào tạo SEO Google"]
function fill_menu2(words){
 document.write("<ul>");
 for (var i=0; i<words; i++)
 document.write("<li>" + text3 + "</li>")
 document.write("</ul>");
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Layout: 3 cột Fixed - Left, Content, Right</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b><br/> <script type="text/javascript">filltext(20)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b><br/> <script type="text/javascript">fill_menu(15)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b><br/> <script type="text/javascript">fill_menu2(15)</script></div>
</div>

<div id="footer"><a href="#">Coppy right &copy; 2014 by Webtopviet.com - Học thiết kế website chuyên nghiệp</a></div>

</div>
</body>
</html>

Coppy code vào file .html sử dụng Editor Notapad ++ để xem được chuẩn nhất !

Xem Demo : http://www.webtopviet.com/example/css/layout/3collumn-fixed-01.html

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *