stop floated elements from overlapping

[blackdragon13]

I am attempting my first three-column layout with css. I am new to using css for layout, as I have always used tables in the past. My problem is that when the browser window is shrunk, my right column collapses in overtop of my content area and, if you shrink the window enough, eventually ends up sitting underneath my left column. This happens with both float: right and with using absolute positioning for the right column.

What I really want is for my content area to be able to stretch (as it does now), but when the window is shrunk I want the right-positioned column to stop moving when it hits the right side of the content area. I tried wrapping a div around all three columns with a set width, which keeps the columns from collapsing, but it also keeps the content area from expanding. I also tried setting a left margin on the right column, but that just pushes the content around at the edge of the margin.

This is probably simple, but it is giving me headaches trying to figure it out. Below is my css code with the relevant id's. I removed all of the id's for my content elements to make it less confusing.

body {
margin: 0;
padding: 0;
background-color: black;
color: white;
font: small Arial, Helvetica, Verdana, sans-serif;
}

#content {
width: 625px;
margin: 0px 180px 0px 180px;
background-color: black;
color: white;
}


#left_sidebar {
float: left;
width: 180px
}

#right_sidebar {
float: right;
width: 180px;
}



Please help if you know how to resolve this.

[blackdragon13]

Nevermind everyone... Naturally, right after making my post I discovered that there is a min-width attribute. I just applied it and the layout is doing exactly what I want.

Thanks to anyone who checks out my post.

[boogyman]

use percentages, and a minimum page width.


body {
width: 100%;
min-width: 760px; /* 800x600 resolution friendly */
}
#content {
margin-left: 28%;
margin-right: 28%;
width: 40%;
}
#left_sidebar {
float: left;
width: 25%;
}
#right_sidebar {
float: right;
width: 25%;
}


if you do out the math you would get
25% left column
5% white-space (padding and ie friendly)
40% main content
5% white-space (padding and ie friendly)
25% right column
100% page

and its 800x600 resolution friendly so if the user resizes the width below 800 their viewport will give them a horizonal scroll, but if someone has a 800x600 resolution browser they will not need the horizontal scroll

[blackdragon13]

Thanks Boogyman, I'll give this a shot. The way I tried it worked in Firefox, but not in IE6, so maybe your method will work out in both browsers. I'll post back here after I try this.

[blackdragon13]

Thanks again to boogyman for the suggested code. Unfortunately, while it works perfectly in Firefox, the problem is still not fixed in IE6. When the window is shrunk down, the floated right column first pushes over the content area and then under the floated left column.

I have not attempted to make the site 800x600 res friendly at this point, I will worry about that once I can get the site to work properly. I have also changed the width percentages from boogyman's code to better suit my layout.

Below is the updated code:

body {
margin: 0;
padding: 0;
background-color: black;
color: white;
font: small Arial, Helvetica, Verdana, sans-serif;
width: 100%;
min-width: 1050px;
}

#content {
margin-left: 18%;
margin-right: 18%;
color: white;
width: 60%;
min-width: 630px;
}

#logo {
position: absolute;
top: 0;
left: 0;
width: 252px;
z-index: 1;
}

#left_sidebar {
float: left;
width: 15%;
padding: 90px 0px 0px 15px;
}

#right_sidebar {
float: right;
width: 15%;
height: 474px;
padding: 60px 20px 0px 30px;
max-width: 190px;
}



Thanks to anyone who can solve this issue.

[boogyman]

can you post the url to your site so we can better help you troubleshoot?

and please read http://www.dynamicdrive.com/forums/showthread.php?t=24866 this article

[blackdragon13]

boogyman - at the moment, I don't have the page I'm working on uploaded to the main site, I'm just previewing it in browsers to see if it is working right. There is already an existing table-based site, and, if approved, the css design I'm working on will eventually replace it. For now, I will try to finish off the css home page and get it uploaded so you can take a look at it. I'll post back here when I get it up.

Also, I actually just read through the forum you gave me the link for. I apologize for not providing enough info, I was hoping this was a relatively simple issue and that I was just missing something obvious. I'll try to make better posts in the future.

Thanks again!

[blackdragon13]

boogyman and anyone else who may be trying to help,

Here is the url to my test page. It isn't finished, but there is enough to see the problem.

http://www.sigmaelectronics.com/css_test.htm

If you look at it in Firefox and IE6 and shrink the window, you can see how the right column stops moving to the left at exactly the point I want it to in Firefox, while in IE6 the right column pushes everything out of the way until it lands on the left side of the page.

Thanks again for all of your help so far, boogyman

[boogyman]

thats not too bad, a couple things to note though.
1) there are a good handful of people who use 1024x800 resolution, so you putting your minimum width at 1050 is singling out not only the 800x600 browsers but the 1024x800 browsers with a horizontal rule.

2) as for the body content being pushed to the bottom, well that comes from the lack of support in IE6 for min-width.
see http://www.sanctifiedstudios.com/internet-explorer-min-and-max-width-bug-fix/

[blackdragon13]

boogyman - thanks for all of your help and for the link to the bug fix. That is exactly what I needed. I only just started building the new site, so before it is done I will set a lower min-width to accommodate people using lower screen res. I've basically just been trying to see if I could even do this using CSS. I am more of a designer than a coder, so I'm surprised it is actually working out so far.

All of your advice has been very helpful, and I really appreciate it.

[blackdragon13]

Just wanted to make one final post on this subject for anyone else who is having this problem. The IE6 fix worked, but it was a little tricky (at least for a beginner like myself). The page that explains the fix did not say where exactly in your CSS code it should go. I had defined my min and max widths in my body styles, so that's where I put the fix. It didn't work.

I had to define a new id, which I just called dimensions. All I put in this ID (in my CSS code) was my width, min width, and max width, along with the javascript that fixes IE6. I called this ID into my html in a div inside my body tags. The div wraps everything inside the body, and the problem was fixed. While Firefox accepts the width values in your body styles, IE6 for some reason does not, or at least it does not accept the fix when it is located in the body styles.

Thanks again to boogyman for supplying the link to this fix.

[skoneru]

gfhjghjfghjgh

[skoneru]

dffdfghdfdf