wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes DIV layout issues Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "DIV layout issues" Watch "DIV layout issues" New topic
Author

DIV layout issues

Kevin P Smith
Ranch Hand

Joined: Feb 18, 2005
Posts: 362
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
Ankit Garg
Sheriff

Joined: Aug 03, 2008
Posts: 9293
    
  17

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...


SCJP 6 | SCWCD 5 | Javaranch SCJP FAQ | SCWCD Links
Kevin P Smith
Ranch Hand

Joined: Feb 18, 2005
Posts: 362
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

Joined: Aug 03, 2008
Posts: 9293
    
  17

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...
 
Don't get me started about those stupid light bulbs.
 
subject: DIV layout issues