Two column layout_html/css_WEB-ITnose

1. Common two-column layout

For example, Baidu search results page has two columns with fixed width and adaptive height.

The blog park article content page has a similar structure to the above.

2. Steps to implement two-column layout

1) Apply floating

CSS as follows

*{margin:0;padding:0;}#header,#footer{width:960px; height:40px; background-color:#f0f0f0; margin:0 auto;}#drapper{ width:960px;  margin:10px auto;} .mainBox{float:left; width:680px;  background-color:red;}.sidebar{float:right; width:270px;background-color:red;}

Our html structure Generally it is like this

<div id="header">header</div><div id="drapper"><div class="mainBox">下午在创新工场听赖晓宁的分享，他说到 O2O 这个领域，如果你只是做简单的线上引流到线下，是没有多少机会的，能赚个 1、2 年钱不错了。真正重要的，是完全拆解掉线下的利益链条，按你的逻辑重新组装起来，这样才有壁垒。</div><div class="sidebar">想革传统行业的命？你得先拆解开原有链条，再重构新格局</div><div style="clear:both;"></div></div><div id="footer">footer</div>

　

Now the height of the floating div in the style is not set, and the height of the left floating div is set to After 50pxj, what will happen if the content exceeds the height?

Therefore, it is best not to fix the height of the floating div, or after fixing the height, add overflow: hidden;

2) Height adaptive

Height adaptive means not setting the height, or height:auto;

3) Clear floating

Baidu search or blog garden content pages add an extra div tag after the floating div. Generally clear floats can be handled.

Someone said, isn’t it also possible to just add clear:both; to the footer?

If you look carefully, there is still a difference. Only a float is added to the footer, and the margins set by the div container dragper do not work.

3. One column has a fixed width and one column is adaptive

A fixed column must use a fixed width of px. If it is adaptive, use % to control the width, such as sidebar 200px, mainBox70%, but if the browser When the visible area is reduced, the sidebar is squeezed to the bottom again. It is best to use width:auto or 100% with negative margin. At this time, there is also a problem when the window is reduced and the sidebar content and mainBox content overlap. At this time, positioning can be used to solve this problem. The modified css is as follows

*{margin:0;padding:0;}#header,#footer{width:auto; height:40px; background-color:#f0f0f0; margin:0 auto;}#drapper{ width:auto;  margin:10px auto; position:relative;}.mainBox{float:left; width:auto; background-color:red; margin-right:275px;}.sidebar{float:right; width:270px;background-color:red; position:absolute;top:0px;right:0px;}

The display effect after the visual window changes

4. Two-column width adaptive

In this layout method, you can directly assign a certain width ratio to the floating div, such as mainBox 70% and sidebar 28%. As the window changes, the two columns are always displayed proportionally, without overlapping or one column being "squeezed below".