Static elements after position:absolute

Answer 1

You can generate this kind of flexible columns layout using the Yahoo YUI CSS Grid builder.

The output is not something that I would want to hand-code, it has divs nested 5 deep, and references the YUI CCS library which is 6kb when minified. I'm not happy that this is not easy to handcode, despite being easy to describe.

Here's the generated html. This may not mean much without the CSS.

   
   
   



   
header content
   

    

    

Main content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    
    
Left bar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    
   
footer content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

It seems to work fine in current Chrome and Firefox, and in Internet Explorer 9. Note that the right column comes before the left one in the mark-up - float: right is used on

. The use of :after css rules is interesting, and may be important.

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...