Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to construct the layout of three-column DIV CSS pages by Float

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to build a three-column DIV CSS page layout in Float. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Are you familiar with the use of building three-column DIV CSS page layouts with float? it's not difficult to get a fixed-width layout from CSS with absolute positioning, but it's a bit difficult to get a liquid layout, so now you're starting to abandon table-based layout techniques.

Constructing three-column DIV CSS Page layout with float

Many network designers are looking for ways to create three-column layouts in the new paradigm of XHTML logos and CSS formats. It is not difficult to get fixed-width layouts from CSS using absolute positioning, but it is a bit difficult to get liquid layouts, so table-based layouts are now being abandoned. This paper introduces a method of obtaining three-column liquid layout by using CSS float and clear attributes.

The main page content is placed in the middle column, and the three-column layout is the most common web layout at present. The two columns on the side put navigation links and the like. The basic layout is to place three columns under the title, three columns occupy the width of the entire page, * put the footer at the bottom of the page, and the footer also occupies the entire page width.

These techniques can be used to generate web pages with tables, fixed-width layouts, or "liquid" layouts that can be automatically scaled according to the width of the user's browser window. The vast majority of web designers are familiar with traditional web design techniques.

Basic methods:

The basic layout consists of five div, namely, title, footer, and three columns. The title and footer occupy the entire page width. The left column div and the right column div are of fixed width, and use the float attribute to squeeze them to the left and right side of the browser window. The middle column actually occupies the entire page width, and the content of the middle column "flows" between the left and right columns. Because the width of the middle bar div is not fixed, it can scale as necessary according to the changes in the browser window. The padding properties on the left and right of the middle column div ensure that the content is arranged in a neat column, even when it extends to the bottom of the sidebar (left or right column).

An example of a three-column layout: take a look at an example of a three-column layout using the techniques described in this article. This example uses bright colors to distinguish the div of the layout.

◆ XHTML Code:

ExampleSourceCode

Header Portsidetext... Starboardsidetext... Middlecolumntext... Footertext...

◆ CSS Code:

ExampleSourceCode

Body {margin:0px; padding:0px;} div#header {clear:both; height:50px; background-color:aqua; padding:1px;} div#left {float:left; width:150px; background-color:red;} div#right {float:right; width:150px; background-color:green;} div#middle {padding:0px160px5px160px; margin:0px; background-color:silver;} div#footer {clear:both; background-color:yellow }

Code description

The order in which the parts of the HTML code appear is very important. The div in the left and right columns must appear before the middle column. Only in this way can the two sidebars float to their positions (on both sides of the screen), and let the contents of the middle bar "stream" into the space between them. If the browser finds the middle bar before one or two sidebar div, the middle bar will occupy one or both sides of the screen, so that the floating part will run below the middle bar instead of next to the middle bar.

The clear:both declaration in the div#header and div#footer styles (style) is used to ensure that the floating part does not take up space in the title and footer. The padding:1px declaration in the div#header style is used to eliminate the abnormal edge in the header background color, which will be seen in the Netscape browser if padding is set to zero.

The float:left declaration in the div#left style is used to squeeze the left column to the left. The width:150px declaration is used to set the fixed width of the column, but you can also set its width to other specific values. Similarly, the float:right declaration in the div#right style is used to squeeze the right column div to the right. In this case, float completely squeezes the left and right columns to the left and right edges of the browser window. However, if these div are contained by other div, then float will squeeze them to the edge of the div that contains them.

In the div#middle style, clear declares that the contents of the middle column are allowed to "flow" between the two sidebars. The padding:0px160px5px160px statement sets the padding to the left and right columns, which allows column div with a width of 150 pixels, with a spacing of 10 pixels. This example is very crude and simple, but it well demonstrates the basic technique of using floating div to create a three-column liquid layout sidebar.

About Float how to build a three-column DIV CSS page layout to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 272

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report