CSS is simple, isn't it? Then try this: I was looking to implement an application design which uses the full screen (regardless of end user's view port resolution) and has a simple 3 or 2 column layout. It has a header section, no footer, but the tricky part was that the columns have to fill down the whole lenght of the browser.
I needed three attempts and I read a whole CSS book (Fexible Web Design - Creating Liquid and Elastic Layouts with CSS) in between to get where I am today. You can download my example or you can try it yourself.
The following screen shot shows the design that I needed to recreate with HTML and CSS only.
(Click on image to enlarge)Define your HTML
I knew, as every developer does, that the design requirements eventually will change. So, for me it was important to define an html that is flexible enough to withstand many (not all) changes in UI requirements, so I would only have to create a new CSS. So, my small design goals are:
- Group logical content sections into DIVs
- Generic DIV names without any layout in mind. I.e. footer or header implies already a layout position
With the above HTML definition, I can define a 3-column layout and display the "first-level-navigation" as a header, the "second-level-navigation" as the left column, the "third-level-navigation" as the right column and the "content" as the middle colum. Even if the requirements change, for example they want the first and second level navigation in a header section togther, I can accomplish that easily with just another CSS.
Column Height 100%
The challenge with columns in browsers is that their length depends on the size of the content. I.e. they don't automatically fill to the bottom of the browser.
Most attempts on adding height="100%" to your DIV's do not work because all parent containers must be defined with 100% height too.
The solution is to assign the height value to the parent conatiner, in thi scase the body and html element.
A small drawback of this is that the vertical scroller is always visible.
Browser Zoom
The next challenge was to support the built-in zoom functionallity of web browsers. When zooming in, the horizontal scroll bar did not become visible, so I had to add the min-width tag to my hrml, body tags.
This creates the horizontal scrolller in zoom view and make sure the content is visible also in the most zoomed-in mode.
Padding
The third challenge I had was that padding of content within my DIVs was inconsistent (it's a browser specific feature...). I followed several online examples and I finally just mimiced their workaround --> add a wrapper within each DIV section:
With the wrapper within the min DIVs, I am now in full controll of the margins and the padding in all browsers.
Marging, Padding of HTML Elements
Browsers have different default margin and padding settings for the basic HTML elements! To overcome broswer differences just overwrite the defaults in the beginning of your CSS:
Now, that everything is set to 0 as default , you won't have any broswer depended surprises anymore when trying out your new design.
CSS layout
Now that we have prepared the stage, go ahead and place your main DIVs and define the padding for your wrappers inside:
Voila - go ahead download the example and play around.
Resources:
To download the sample code refer to our download page: Downloads