In early days of web, HTML tables provided the basic grid
structure, But those tables are bad for accessibility and search engine
optimization. For complete cross browser support, we need to use floats and
margins to create multiple column layouts.
Different types of techniques used for cross browser layout
are as following:
Creating a Single Column Layout
Single column layout is frequently used for mobile designs.
All the HTML element are displayed in the order they appear in the underlying
code so the main layout considerations are the width of the column. To restrict
the width of a single column layout, wrap everything between the <body>
tags in a <div> and give the <div> an ID, such as wrapper.
#wrapper {
Margin: 0 auto;
Width: 100%
Max-width:
760px
}
Putting the Sidebar First and Floating It to One Side
The basic technique is to divide the page into four sections
using <div> tags (or HTML5 semantic elements), and then wrap the whole
page in an outer <div>, which controls the overall width and centers the
layout. The order of elements in the HTML markup looks like this:
1. Header
2. Sidebar
3. Main content
4. Footer
To display the sidebar on the left, set a wide left margin
on the main content <div>, and float the sidebar to the left. The wide
margin prevents the main content from filling the full width of the outer
<div> when the sidebar comes to an end.
Keeping the Footer in Place
Most of the time, a sidebar is likely to be shorter than the
main content. However, when elements are floated, all subsequent content moves
up to fill the vacated space.
The solution is simple: prevent the footer from moving up by
adding the clear property to the #footer style.
#footer {
padding: 10px;
clear: both;
}
Using a Background Image to Simulate Equal Columns
To get around the problem of the background of one column
being shorter than the other, the most reliable cross browser solution is a
technique known as faux columns (faux is French for “false”). A vertically
tiled background image on a parent element creates the illusion of equal length
columns.
When working with a fixed-width layout, an image should be
created the same width as the sidebar, and use it as the background-image on
the left or right of the parent element. For a liquid layout, create a
background image for both columns and position it horizontally using a
percentage value. The image needs to be at least as wide as the maximum width
of the layout, and the proportions of the background colors need to be the same
as for the columns.
Using Absolute Positioning for the Sidebar
Absolute positioning can be used to move the sidebar
alongside the main content. You put a wide margin on one side of the main
content to make room for the sidebar and then move it into place. To ensure
that the sidebar moves with the rest of the layout at different screen widths,
you need to establish a containing block for it by making the wrapper
<div> relatively positioned. The main code segment for this segment is
given below:
#sidebar {
width: 29%;
padding: 2%;
position: absolute;
top: 63px;
}
Using a Negative Margin for a Left Sidebar
Another way of moving the sidebar into position when it
comes after the main content in the HTML markup involves floating both columns
to the left. A left margin is added to the main content to make room for the
sidebar, and then adjust their relative positions by applying a negative left
margin to the sidebar. The basic code segment is given below:
#sidebar {
width: 29%;
padding: 2%;
float: left;
margin-left: -100%;
}
Using CSS Table Display for Layout
Using the table-related values of the CSS display property
allows the alignment benefits of table layout without resorting to HTML tables.
CSS table display gives you the best of both worlds by allowing ordinary HTML
elements to act like table rows and cells. Although it can be used for page
layout, it’s also suited to aligning form elements horizontally and vertically.
The most useful values for layout purposes are table,
table-row, table-row-group, and table-cell.
Setting display to table-column or table-column-group is equivalent to
setting it to none.
Using the values mentioned above changes the behavior of
HTML elements in the following important respects:
• Padding and borders are included in the element’s width.
• An element can have margins only when display is set to table, inline-table or table-caption.
• Elements generate anonymous table objects when necessary
No comments:
Post a Comment