part II

sidebar

the sidebar is, on purpose, very very tall, to make sure the main contents area remains shorter.

a tablecell
a tablecell
a tablecell with more contents in, it contains multiple lines of text
a tablecell

Subheader

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam libero velit, vestibulum vitae, congue ac, rhoncus eu, enim. Vivamus bibendum feugiat mauris. Ut id velit vitae diam porttitor pharetra. Aliquam vehicula tincidunt turpis. In faucibus pharetra velit. Vivamus magna. Ut nisl nisl, accumsan eget, malesuada id, euismod ac, ligula. Sed nulla. Praesent venenatis dolor non risus. Proin mollis. In ornare purus ut felis. Aliquam felis. Donec pede. Etiam aliquam. Suspendisse ultrices, urna non varius faucibus, turpis turpis pellentesque wisi, vitae dapibus nulla tortor et urna.

A positioned sidebar, containing a table. No problems there, as the sidebar container has a (pixel-) defined width. A main contents area, with a red border (static <div>, width defined only by margins and padding).

The tables should be as wide as the main contents, and not drop under the sidebar. Except for the first table (control table), all tables are wrapped in a div (width:100% declared).


 icon a table, no width is declared; without a wrapper

cell1 cell2 cell3 cell4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 icon a table, width:100% is declared, within a wrapper.

cell1 cell2 cell3 cell4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 icon a table, width:100% is declared and equally size cells (col width:25%), within a wrapper

cell1 cell2 cell3 cell4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.