• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • Ron McLeod
  • paul wheaton
  • Jeanne Boyarsky
Sheriffs:
  • Paul Clapham
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
  • Himai Minh
Bartenders:

DIV layout issues

 
Ranch Hand
Posts: 362
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi

I am trying to convert my old TABLE based layout into a more flexible DIV layout. What I'm hoping to get is a basic frame which I can then populate the 'contents' section with.

The basic DIV layout is sort of right but the left and right nav columns are not in line with the the banner/topnav; also the hight of left/right/contents should stretch down to the footer, but if I put the hight at 100% it goes beyond the footer and creates a scollbar.

Here is the layout as it stands:
HTML


CSS:


Could anyone help cleaning up the last two issues for me/

Cheers

KS
 
Sheriff
Posts: 9709
43
Android Google Web Toolkit Hibernate IntelliJ IDE Spring Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well I'm sure you won't find any ready made solutions here (and for good reason). Lets start with the wrong positioning of leftnav and rightnav. If you wrap contents, leftnav and rightnav in a div, and assign it 1000px width and set margin of that wrapper div as auto, your leftnav and rightnav will come along with the contents instead of going to the right and left edge of the browser. As far as equal height column goes, your problem is a bit strange, you have set footer to a fixed position. Generally with 2 or 3 columns, you want all of them to be of the same height as the longest column. That can be achieved with a few tricks (like bottom padding and negative margin etc). But your problem is a bit different so I can't suggest any solution for that...
 
Kevin P Smith
Ranch Hand
Posts: 362
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Cheers for that, the left/right/contents panels are now together and in the center, I basically copied the banner DIV.

As for the height issue, I was just hoping there was a way of ding some sort of height = browser height (100%) but actually thinking about it, as all the panels (left/right/contents) will be white and as the footer is fixed to the bottom it probably doesn't matter.

New CSS:


Cheers for the help!

KS
 
Ankit Garg
Sheriff
Posts: 9709
43
Android Google Web Toolkit Hibernate IntelliJ IDE Spring Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Kevin its good to know that its working. However there is still some useless code in your CSS.
1. There is no use of position and top properties in banner, topnav, leftnav, rightnav, contents and middle. Actually float is not a valid value for position property. Look here.
2. center is not a valid value for float property as you've used in contents. Look here...
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic