Skip to main content

Posts

Showing posts with the label purecss

Liquid resizing page elements

Many times I am told that using table s to layout a web page is a sin.  But, when I try to resize a DIV, it's hard to get it to resize when the window has been resized.  Setting 100% does not seem to work. So far we have the 3 column liquid layout, but it is not enough when the web pages (or applications for that matter) are more complicated.  When searching on the Internet to resize a DIV in response to a window resize, I am mostly presented with JavaScript solutions. Yeuch. This is not very accessible for users of other browsers. Luckily, there is an undocumented feature of CSS that helps with this: table layout. Firstly, create the element in the HTML: <div id ="pageBlock" > Content comes in here... </div> And then in the CSS we set our display: #pageBlock {   display : table;   height : 100%;   width : 100%;   table-layout : fixed; } Although this works with Firefox, it still likes to show a scrollbar for some reason, so you add th...