Example: CSS hacks implements Multi-column layout across browsers

Source: Internet
Author: User

  Create a webpage for the customer's home (www.bkjia.com)It is not easy to create a high-profile multi-column layout with pure CSS. This tutorial will focus on analyzing multiple problems that occur in the Multi-column layout, and then provide you with a simple solution that can be used in all browsers, do not use images, scripts, CSS hacks, and pass verification in the strictest XHTML specifications.

The crux of the problem

<STYLE type = text/css>. title {color: # ff7200; font-size: 23px; line-height: 28px} </STYLE>

As shown in, the background height is not uniform due to inconsistent content of each column. The background is actually the content (the standard box model is composed of the content area , Whitelist Area , Border Area And Boundary And the background exists in the first three; IE is the first two. Then, how can we increase the height of those shorter columns so that the height of all columns is equal to the height of the highest column? This is really tricky, because we don't know the height of each column, and we don't know which column is the highest. We cannot simply give all columns a clear height, which may lead to a large margin of white space for all columns, or the lack of height will lead to the failure to display all the content of some columns! In reality, the content length is dynamic, so the height of each column is dynamic. We must realize that there is no "fixed" word in the network. The resolution of each person's display is different, and the browser font size settings are also different, which will affect the display height of the content.

Separate content from background

The first step to Solving High problems is to split it into two smaller ones that can be solved separately. In this way, we use a column to correspond to a DIV, and now a column to correspond to a DIV, a content to be loaded, and a background to be displayed. This separation helps us to control each element and combine them in another more effective way, which will soon be described in the following chapter.

  • 6 pages in total:
  • Previous Page
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • Next Page

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.