General DIV CSS three-column layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:31:18

Original

1700 people have browsed it

The general three-column approach is as shown in the figure below. My approach will have several DIV frames: Top, Container, Left, Content, Right, and Footer, which are the DIVs that usually exist.

====================
CSS source code
====== ==============
body{
margin:0; padding:0px} (If you want to center it and it works properly in Firefox, you need to change it to margin: 0px auto ;)

#DivTop {
width:1000px;
} (or set percentage)

#DivContainer {} (You don’t need to set width, it will default if there is no setting is 100%)

#DivLeft {
width:200px; float:left; }

#DivRight {
width:200px; float:right;}

#DivContent {
margin-left:200px;margin-right:200px;}

#DivFooter {
clear:both;}
========== ===========
HTML source code
====================

Huashan Sword Room

;div id="DivRight">The right side is square

The middle is square and round

Step down and step on all directions

====================
The arrangement of the above HTML is The key is that the middle Container contains the content of three DIVs: left, middle and right. The order of the left, middle and right source codes in the main body HTML is left, right, followed by Content
This is Because we have set up float:left(right) on the left Div and right Div, IE and Firefox browsers will first determine the left and right positions, and then the final middle content will come in, because we have set up margin -left :200px;margin-right:200px;, thus leaving the left and right block widths free.

Finally, you must set the clear:both; attribute in DivFooter to clear the float attribute so that the footer can be correctly displayed at the bottom. If you do not set this attribute, hehe ...Footer will float up for you, very disobedient :P

In addition, the height set by Firefox for the entire CSS scene will affect the footer at the bottom, as well as the judgment of padding and margin. IE and Firefox is very different, so you have to be careful with the settings. You will encounter this when you repeatedly design more complex layouts, but knowing this makes it easier to handle. It is nothing more than an arithmetic problem of addition, subtraction and subtraction.

Also, Firefox does not accept the CSS setting of text-align: center;, so the traditional

is quite easy to use: P, of course, there is a solution There are many, it just depends on everyone’s creativity.

Related labels：

一般的 DIV + CSS 三栏式排版

source：php.cn

Previous article：Advantages of using DIV CSS in website production_html/css_WEB-ITnose Next article：div css absolute positioning and relative positioning_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn