16 replies [Last post]
joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

I have a three column setup spanning the length of my page.

The problem is, when I users resize there window the right column overlaps the center column.

Here's the code i'm using.

#leftBox {
position: absolute;
top: 50px;
width: 150px;
padding-right: 5px;
}

#midBox {
position: relative;
top: 50px;
margin-left: 150px;
margin-right: 150px;
padding: 5px;
}

#rightBox {
position:absolute;
right: 0px;
padding-left: 5px;
width: 150px;
}

[/code]

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 20 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Client Side Resize Issue

Hi there,

It looks to me like it's the position:absolutes causing your problems. Doing this takes the positioned element out of the normal flow of the page (imagine it hovering 3 feet up from the page surface!) and so when the page gets narrower the right-hand box hovers over the middle one.

Using position:absolute for big bits of your design can cause you untold problems - you're better off not using it if you can.

If it's causing you problems then there are loads of 3-column CSS layout tutorials and code generators (including one on this site) - have a go with them and see what you can produce.

You'll basically be floating your left box left and your right box right - it's worth having a look at the generators here if nothing else to make sure you see what it does about clearing the floats as that can cause problems.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

I tryed floating my left box left worked. But flating my right box right only worked in IE. Hence why I went with position: absolute.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 20 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Client Side Resize Issue

Yeah that's likely to be a clearing issue - have a go with the CSS layout generator on this site - it takes literally 30 seconds to generate a 3 column layout then have a look at how the various divs are cleared. It's a lot easier to fix a clearing issue than try to create a postion: absolute layout.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Client Side Resize Issue

Or a source order issue. Did you put the right column before the middle column in the source code when you floated it right? It would need to be. There are other things you can do to change the order of the source - post if you're interested. Smile

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

wolfcry911 that solved it.

however because of the way things are set up me center column needs to be before my right column.

#pgWidth {
 width: 825px;
 margin: 0 125px 5px 0;
 }
#leftBox {
 float:left; 
 left:0px; 
 width:155px; 
 }

#midBox {  
 position:relative;  
 margin:0 185px 0 165px; 
 padding:0px 5px;   
 }

#rightBox {
 position:relative;
 float:right; 
 margin-right:0px;
 width:175px;
 } 

Here's the setup of my page.

<div id="pgWidth" >
 	<div id="leftBox">Left Content Box</div>
	<div id="midBox" >Main Content Box</div>
	<div id="rightBox" >Right Content Box</div>
</div>
[/code]

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

Any more suggestions.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Client Side Resize Issue

hi joe,
before we delve into this further, can you more precisely describe the problem. Does the right column start to overlap the middle column as soon as you start to resize - or does it not overlap until the window reaches a certain size.
Do the flanking columns need to be a set width, or can they be fluid like the middle column?
I'm asking these questions because there are many ways to do a 3 column layout, but you need to choose which is best for your situation.

Look here:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

I'm solved the resizing issue by floating the left and center column 'left'. I then tryed to float the right column right.

[_][__]
       [_] 

This lil image kinda explains what i'm getting at.

My right column is positioned below my center column to the right hand side.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Client Side Resize Issue

It appears that the container is not wide enough. Have you given the middle column a fixed width? If not, it will 'shrink wrap' to the widest content, which may be forcing the right column down.
Do you have a live link?

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

I don't have a link but you can see the code i'm using in this post.
http://www.csscreator.com/css-forum/sutra44336.html#44173

I' tryed using width that was a lot smaller but had no luck.

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

Ok maybe an explanation of what i'm trying to do will be better.

I'm trying to have a three column design with a header and a footer.

The left column needs to be 155px while the right column needs to be 175px. The center column MUST scale accordingly. This should all be surrounded by a <div> tag that's 825px.

I know there are others ways to do this. But for learning purposes i'm trying to to do this using the code I provided, if this is not possibly then i'll attempt to do it using as lil div tags as possibly.

So far i've hammered out the header, left column and center column.
I've you look a few post up you'll see the problem i'm having with the right column.

Any help would be appreciated as I really would like to get a better understanding of why and how some things work in css.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Client Side Resize Issue

Well, you just said you floated the left and center columns left, but the code you pointed to has the center code as position: relative - no float. Do you have a width on the center (floated) column? If not it will shrink wrap to the largest element - probably a paragraph which will take up all of the available width. If this is the case, there is no room for the right float, so it drops down and floats right.

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

I had the width set to 100%. When I floated the center column.

I've now put a set width which works, but is now presenting problems of it's own.

The problem with the set with has mainly to do with the spacing in FF and IE.

I was hoping to have a fixed width for the left and right column. Then have the center column scale accordingly. Hence why I was using position:relative.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Client Side Resize Issue

Okay, I'm better understanding you now. First off, all the problems would be solved if you could just change the source order - but you already said it must be as is.

Now, you said all three columns are in a container div of 825px width. So why must the center column scale? If the two side columns are of a fixed width then the center column can be given a width of 495px. Why not do this:

#pgWidth {
    width: 825px;
    margin: 0 125px 5px 0;
    }

#leftBox {
    float: left;
    width: 155px;
    }

#midBox { 
    float: left;
    width: 495px;
    }

#rightBox {
    float: left;
    width: 175px;
    } 

or #rightbox could be:

#rightBox {
    margin: 0 0 0 650px;
    }

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

Intially I didn't want to have a fixed width (container div) for the entire page.
What I was trying to do is prevent the right column from overlapping the others when the page was resized.

This is the reason why I wanted my middle column to scale accordingly.

joe_C_nice
Offline
Regular
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Client Side Resize Issue

Anyone know why this works in IE but not Mozilla?

<div style='width: 165px; border: solid #000 1px; height: 15px;'>
 <hr style='width: 100%; height: 4px;' />
 </div>

The <hr> width extends beyond the borders of the div tag.