what is the best way to achieve this layout?

Question

I am struggling a bit trying to achieve the following layout. I have the following divs:

----------------wrapper--------------
| ---------------info-------------- |
| | ----detail--    ---summary--  | |   
| | |          |    |          |  | |
| | |          |    |          |  | |
| | |          |    ------------  | |
| | |          |    ----graph---  | |
| | |          |    |          |  | |
| | |          |    |          |  | |
| | ------------    ------------  | |
| --------------------------------- |
|                                   |
| ---------------info-------------- |
| | ----detail--    ---summary--  | |   
| | |          |    |          |  | |
| | |          |    |          |  | |
| | |          |    ------------  | |
| | |          |    ----graph---  | |
| | |          |    |          |  | |
| | |          |    |          |  | |
| | ------------    ------------  | |
| --------------------------------- |
|                                   |
-------------------------------------

How can I use position and display on my divs to get my page to show correctly?

Answer 1

i have created a sample of what you want.

http://jsfiddle.net/FFU2Y/

Hope it helped.

just try to edit the css of what you like it to be or add div.

Answer 2

Try to use 960.css grid layout !

• http://960.gs/

  or another way would be using Bootstrap from Twitter, which provides grid solutions, css reset, and many more awesome stylings.

• http://twitter.github.com/bootstrap/