CSS CSS 3

Create a complete Layout in CSS

create a complete layout in css
Written by Saiful Islam

How can you layout a web page:

  • Create an HTML first.
  • Style with CSS
  • Build a layout

Multiple column layouts:

CSS3 introduces a multiple column layout design of a web page. There are two ways to create a multiple column layout:

  • By using the float property
  • By using position property

You can manage multiple columns by using CSS3 properties like:

  • column-count : The number of columns
  • column-fill : Strategy for filling column
  • column-gap : Space between two columns
  • column-rule : Shorthand property of column-role property
  • column-rule-color : Color of the rule
  • column-rule-style : Style of the rule
  • column-rule-width : Width of the rule
  • column-span : Spanning of column or columns
  • column-width : Fix the column width
  • columns : Shorthand property for column

But these properties are not suitable for all designers yet. So, here I use float property and other CSS3 tricks to design a multiple column layout. The position property does not ideal for all devices like tablet and mobile devices. For this reason you should avoid position property for the multiple column layout design.

Example:

In this example I create a two column layout for container portion of the web page. The first column contains “Tutorial” and “We provide you” heading. The second column contains “More from this site” heading with some links, “Did you know?” and “Submit your code”. At first I write the HTML code for these headings and then float them as they are the two individual <div> elements.

I also create the two column layout for footer portion. First column of footer contains copyright information and second column contains the contact information.

You can design a three column layout also by CSS3. But greater than three is not better for web design.

 Output:

create a complete layout in css

create a complete layout in css

About the author

Saiful Islam

1 Comment

  • Actually, preparing a layout can provide the primary shape of a site which is so important for the beginners. I hope I can learn a lot from this site… Thank you dude….

Leave a Comment