Biểu diễn nội dung đẹp mắt

Trang chủ

Liên hệ

Góp ý

Diễn đàn

Home

HTML

CSS

Javascript

SQL

ASP VBScript

PHP

Lập trình C

Share Code + Project

Dịch vụ thiết kế Website

Liên kết, trao đổi logo

Hỗ Trợ Lập Trình

Biểu diễn nội dung đẹp mắt

Bài viết được đóng góp từ bạn Mai Trang.
Không cần sử dụng table các bạn vẫn có thể biểu diễn các đoạn text, hình ảnh như hình dưới.

<style type="text/css">
body {
    margin: 10px 0;
    padding: 0;
    color: #000;
    background-color: #fff;
    font-family: Georgia, serif;
    font-size: 100%;
    text-align: center;
}
.clear {
    clear: both;
}
.alignright {
    text-align: right;
}
.wide {
    background-color: #ffc;
}
.top {
    border-bottom: 1px solid #000;
}
.bottom {
    border-top: 1px solid #000;
    padding-bottom: 1px;
}
.testfloat {
    width: 80px;
    border: 2px solid #f90;
    background-color: #ffd;
    font-size: .8em;
}
.to-right {
    float: right;
}
.to-left {
    float: left;
}

.wrapper {
    margin: 0 auto;
    width: 762px;
    w\idth: 760px;  /* C + L + R + 2 */
    text-align: left;
    background-color: #cce; /* L */
    border: 1px solid #000;
}
.outer1 {
    margin-left: 170px;
    background-color: #cfc; /* R */
}
.outer2 {
    margin-right: 160px;
    background-color: #fcc; /* C */
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.outer0 {
    position: relative;
    margin-left: -171px;
    margin-right: -161px;
}
.wrap-cl {
    float: left;
    width: 599px; /* C + L + 1 */
}
.center {
    float: right;
    width: 428px;  /* C */
}
.left {
    float: left;
    width: 170px;  /* L */
    margin-right: 1px;
}
.right {
    float: right;
    width: 160px;  /* R */
    margin-left: 1px;
}

/* previene allargamento floats (hidden) e problemi rendering left col (relative) in IE/Mac \*//*/
* html .inleft, * html .inright, * html .incenter {
    width: 100%;
    overflow: hidden;
}
* html .wrap-cl {
    position: relative;
}
/**/

.outer0 {
    word-wrap: break-word;
}
p, h1, h2, h3 {
    margin: 0 0 1em 0;
    border: 1px solid red;
}
</style>
<!--[if lt IE 8]><style>
.outer0, .wide, h2 {
    _height: 0;
    zoom: 1;
}
/* securite' */
.wrap-cl, .left {
    margin-right: -1px;
}
.center, .right {
    margin-left: -1px;
}
</style><![endif]-->
</head>


<body>
<div class="wrapper">
    <div class="left">
        <div class="inleft">
            
            <div class="testfloat to-right">
                Here is a left float test box.Here is a left float test box.
            </div>
            
            
            <p>This is here to make this column longer. This is a <a href="#">test link</a>. This is here to make this column longer. This is a <a href="#">test link</a>. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer.
            </p>
        </div>
    </div>
</div>
</body>