By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

CSS 2 columns layout full screen with floating nested divs

basstradamus
P: 11
Hi
After few hours of searching the web and brainstorming I did not solve my problem.

The problem...
I want to create two column full screen layout (with header and footer) where left column has width 190px and right column has rest of the screen. Right column contents is changing dynamicly and sometimes it is wider than column itself so if right column is floating it is going down below left one.

Pic below is showing the problem



I hope that there is solution different than use static width of view.
Mar 29 '07 #1
Share this Question
Share on Google+
4 Replies


Expert 100+
P: 1,892
Hi
After few hours of searching the web and brainstorming I did not solve my problem.

The problem...
I want to create two column full screen layout (with header and footer) where left column has width 190px and right column has rest of the screen. Right column contents is changing dynamicly and sometimes it is wider than column itself so if right column is floating it is going down below left one.

Pic below is showing the problem



I hope that there is solution different than use static width of view.
Have you found a solution to this problem?
Mar 30 '07 #2

KevinADC
Expert 2.5K+
P: 4,059
use frames. Peg the left frame at 180 and the right frams as * which will use all the rest of the screen.

Or use a two column table

or use three divs, a contianer div with 100% width the two column divs within the container div. Change the two column divs to "display: inline" and they hopefully don't break.
Mar 30 '07 #3

P: 70
Something similar to this http://www.buyersquad.com?
Mar 31 '07 #4

basstradamus
P: 11
I did not used frames because I not preffer this way. I solve this problem usign pure CSS. That's how I wanted to.

Expand|Select|Wrap|Line Numbers
  1. #leftMenu {
  2.     width: 190px;
  3.     cursor:default;
  4.     overflow:hidden;
  5.     float:left;
  6. }
  7. #right {
  8.     margin-left:190px;
  9. }
  10. .mysqlAddTableMenu {
  11.     display:none;
  12.     width:100%;
  13.     float:left;
  14.     overflow:auto;
  15. }
Where #leftMenu is for naviagation fixed width left, right is div that contain any other stuff that will de displayed on the screen, and .mysqlAddTableMenu(is nested in right) is showing scrollbars when it dosent fit to screen.
I figure that when floating of .mysqlAddTableMenu is not set that layout doesn't work in IE.
The style that I listed above is only small part of page style but it concern the problem.

Thanks for any help on your side.
Apr 18 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.