CSS DIV two-column web page layout

The advantage of planning a two-column webpage design through CSS DIV is that it can make the overall code cleaner and more convenient for future management or modification. Moreover, two-column webpages can be said to be a very common design method. The main reason is Compared with the single-column design, the webpage configuration has more block space to use. We still continue the introduction method of the previous article " CSS DIV Single-column Web Page Typesetting ", first look at the basic appearance of the two-column webpage, and then It is divided into two parts: CSS style and HTML Code.

CSS DIV two-column web page layout presents the layout of



common web pages or blogs. The layout is similar to this. The top is the header area of ​​the web page, and the bottom is the footer area of ​​the page footer. The middle is divided into a two-column area, on the left. It is the Sidebar area, and the larger area on the right is the web content area. The main article content is placed in this area. With this concept, you can start to design each block separately through the grammar of css, and finally combine it with HTML to become a two-column layout web page plan!

CSS style section

<style type="text/css">
#Header{
　width:360px;
　height:80px;
　text-align:center;
　line-height:80px;
　font-size:15px;
　color:#fffaf3;
　font-weight:bold;
　background-color:#f9c81e;
}
#Sidebar{
　width:120px;
　float:left;
　height:280px;
　text-align:center;
　line-height:280px;
　font-size:15px;
　color:#ffffff;
　font-weight: bold;
　background-color:#cecece;
}
#body{
　width:240px;
　height:280px;
　text-align:center;
　line-height:280px;
　font-size:15px;
　color:#f9c81e;
　font-weight:bold;
　background-color:#fffaf3;
　float:left;
}
#Footer{
　width:360px;
　height:80px;
　text-align:center;
　line-height:80px;
　font-size:15px;
　color:#fffaf3;
　font-weight: bold;
　background-color:#f9c81e;
}
</style>

In CSS style, design good styles for Header, Sidebar, Body, and Footer. The biggest difference from the single-column design is that the two-column design uses CSS float technology to make the DIV block of the Sidebar and the main text of the sidebar The DIV blocks of the area body are arranged side by side through a floating relationship, and a two-column web page plan can be created. The following are the meanings of the styles in the CSS style. In principle, they are used to control the DIV block The size, float, color and style of the text inside the DIV .

• width-set DIV width
• height-set DIV height
• text-align -Set the text alignment in the DIV
• line-height -set the line height of the text in the DIV
• font-size -Set the size of the text in the DIV
• color -set the text color in DIV
• font-weight -Set the text weight in the DIV
• background-color -Set the background color of the DIV block

HTML Code section

<div id="Header">Header field</div>
<div id="Sidebar">Sidebar</div>
<div id="Body">Body field</div>
<div style='clear: both;'></div>
<div id="Footer">Footer field</div>

Back to the HTML part is very simple. This is also the advantage of designing web pages through CSS. Designers can write the sample CSS style and HTML Code in the same file, and save it as a file like test.html for preview. Of course You can also embed the css style into another file and embed it in the HTML page again to keep the HTML page tidy. Let’s take a look at this HTML Code. There are 5 DIV blocks in total . Because there is one more block to clear the floating effect, the main function is to clear the floating effect of the elements above the DIV of the line , so that the next ones will appear. The Footer block is displayed normally. The above is a simple technique for designing two-column web page layout through CSS DIV. In fact, there are many ways to design two-column web page layout. Designers can also make some changes according to their needs, such as placing the Sidebar on the right side of the configuration. very common.