How to Create Div Columns using CSS Styles
Div columns can be designed by nesting the multiple fixed size or auto adjusting Div elements using CSS styles. Div layouts having multiple columns created using nested Div element arrangement provides the tableless Div overlay design. It's a bit harder to manage the Div layout using CSS Styles as compared to table based layout but Div overlays are considered as favorite structure for search engine crawlers. So according to SEO point of view Div based layouts provide much more readable and a valid structure to web crawlers. Div overlays render the web pages much quicker and have less file size of web pages than table layouts. This allows the search engine crawlers to cache the web pages quickly in less time without consuming too much bandwidth.
Creating Div Columns using CSS Styles
You can create Div columns similar to HTML tables by nesting the Div elements within other. CSS styles such as position or float property enables you to control the Div columns positions. You can set the fixed height and width of Div tag to create the Div columns having equal size, otherwise Div columns adjust their size according to the content placed inside them. Another thing by fixing the width of each Div column you can manage the design easily that will expand along the length of the web page. A single CSS style class can control the size of multiple Div columns. If you will try to fix the Div Column height then it could lead to Div overflow problem. You can learn about Div overflow problem from the tutorial: HTML Div Tag Overflow. Later on we will learn about Div Columns and Div layouts using CSS styles with help of examples.
Div Overlays using CSS Style Float Property
While designing a Div Layout you can control the web page overlay using CSS styles. With CSS styles you can use the CSS float property to align the Div tag to the left or right direction. You can create Div overlay using CSS float property having value equal to left that overlays the Div tags one by one on the web page starting from the direction left to right. Similarly you can arrange the Div overlay using CSS float: right that sets the Div tags in direction right to left. You can learn it from the previous tutorial: HTML Div CSS Style Float.
Series of Div Layouts, Div Overlays using CSS styles include following tutorials with examples:
1. Single Column Div Layout, Div Overlay using CSS Styles
2. Div 2 Columns Left Navigation Div Layout using CSS Styles
3. Div 2 Columns Right Navigation Div Layout using CSS Styles
4. Div 3 Columns Layout using CSS Styles – Div layout 1
5. Div 3 Columns Layout using CSS Styles – Div layout 2
6. Div 3 Columns Layout using CSS Styles – Div Layout 3
