Stable and flexible HTML column layout and html layout
Main features:
------------------------------------------------ Code -----------------------------------------------------
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Meta http-equiv = "cache-control" content = "private"/>
<Style>
. Col-layout {
Height: 400px;/* original layout height */
Border-collapse: collapse;
}
. Col-layout. col {
Padding: 0;
Vertical-align: top;
}
. Col-layout. left. col {
Background-color: #557175;
}
. Col-layout. right. col {
Background-color: #635370;
}
. Col-layout. col-content {
Overflow: hidden;
}
. Col-layout. left. col. col-content {
Width: 400px;/* column width */
}
. Col-layout. right. col. col-content {
Width: 600px;
}
</Style>
</Head>
<Body>
<Table class = "col-layout">
<Tr>
<Td class = "left col">
<Div class = "col-content">
<! -- Real column content -->
<Div style = "height: 1000px; width: 2000px; background-color: #83 dcbe"> Will be hidden </div>
</Div>
</Td>
<Td class = "right col">
<Div class = "col-content">
</Div>
</Td>
</Tr>
</Table>
</Body>
</Html>