CODEWITHSUNDEEP
htmlcsslayout
Removed_account
Removed_account

Reputation: 4059

Filling all the available space horizontally and vertically, with divs

I'm trying to achieve the following layout without tables or JavaScript.

The layout

It's basically the common layout of desktop software. Some toolbars and the actual content in the middle. I'm trying to replicate the layout in a web-application.

I need all the toolbars to be flexible and optional. So in one state there might only be the top toolbar with 3 rows of icons and in another case all four toolbars with just a little content.

The application will be using 100% of the document width / height and must not overflow. However, the div in the middle has overflow: auto and should scale in every direction. There might be a case where all the toolbars are hidden and then the middle div should take the whole document.

The application requires JavaScript and doesn't support IE6 at all, but I'm still looking for a cross-browser way to do this with CSS.

It's very easy and clean to do it with a table and I know how to do it with JavaScript, but I have come across this problem multiple times and would like to stop using tables.

Upvotes: 1

Views: 163

Answers (1)

jmav
jmav

Reputation: 3149

It can't be done cross browser compatible. Use jQuery javascript plugin: http://layout.jquery-dev.net/

Upvotes: 4

Related Questions