2 replies [Last post]
djdejan
Offline
newbie
Last seen: 15 years 34 weeks ago
Timezone: GMT+1
Joined: 2006-06-06
Posts: 2
Points: 0

Hi everyone,

I am new here.
I have a question about div columns and its width.

I have 3 divs:

#pane_left{
width: 120px;
float: left;
margin: 0px;
}

#pane_main{
padding-right: 11px;
padding-left: 11px;
margin-bottom: 30px;
margin-top: 0px;
position: relative;
width: 300px;
float: left;
}

#pane_right{
width: 124px;
float: left;
}

Sometimes #pane_left and/or #pane_right is empty and then I want to stretch #pane_main as it can.
Does anyone hava idea?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 columns and width

Don't give pane main a width. If it has a width, it'll always be that width. An empty div won't be displayed, so you shouldn't have to do anything, except make sure you float the right hand pane, right and put the content of pane_main after the two floated panes. You can give pane_main a style of overflow:hidden for good measure.

e.g. sample

btw, using pane_left and pane_right is not the best. Name them after the content that goes in them. Then if you decide to move them somewhere else the ids will still be relevant.

/edit, you might need some extras to overcome IE's eccentricities - giving a div some small height and space when its empty.

djdejan
Offline
newbie
Last seen: 15 years 34 weeks ago
Timezone: GMT+1
Joined: 2006-06-06
Posts: 2
Points: 0

3 columns and width

Thank you Chris.

I have made changes as you told me and it works fine.