This layout is fully compatible with resizable text. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML? No JavaScript Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Say goodbye to annoying short columns! You can read my article on equal height columns if you want to see how this is done. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. In this layout the background colours of each column will always stretch to the length of the longest column. The columns can also be configured in the opposite order if required. This layout does exactly that: The the left-hand main page comes first, then the right column (see the nested div structure diagram for more info). To make your website as optimised as possible your main page content must come before the side columns. The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on link source ordering for more details on how this affects links). Instead, this design uses percentage widths and clever relative positioning. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. The CSS used for this layout is 100% valid and hack free. Notice that the main content column (col1) comes before the side column. The two column content divs (col1 & col2) are inside colleft. The header, colmask and footer divs are 100% wide and stacked vertically one after the other. I've colour coded each div so it's easy to see: For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures: 800 x 600 Right column: 162 pixels Main page: 550 pixels 1024 x 768 Right column: 210 pixels Main page: 709 pixels The nested div structure Because of this, it's important to know the maximum widths allowable at common screen resolutions. This chops off any content that is wider than the div. To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. Vertical dimensions are not set so they stretch to the height of the content.
Percentage dimensions of the right menu layoutĪll the dimensions are in percentage widths so the layout adjusts to any screen resolution.
0 kommentar(er)
