im using css for a layout and when my DIVs touch a border it makes a scroll where you can see my white background.my current solution is disabling scrollbars but this looks crappy.how could this be fixed.
id post a link but itd be useless, cause of my solution.
Ok, I assume here you want a layout with fixed width side columns, fluid width centre column, and all columns equal height and at least screen height.
One of the problems is your are only designing for your own high-resolution widescreen, and not taking into account various widths (some users are still stuck with 800x600 15" monitors) - plus the use of absolute positioning.
These types of layouts are tricky until you get used to them, and a few facts need to be understood :
1) You cannot set a container to fill available height
2) You cannot force unrelated containers to maintain the same height
3) Any % height setting can only reference the SET height of the parent container - if the parent does not have a height explicitly set, then all heights revert to "auto" (the default).
Before I get into this, there are a couple of other things. Your image url seems to contain a backslash (\) - I assume your wanted the images in an "images" folder, so it should be a forward slash (src="images/Square-Logo.png"). It is also not a good idea to use spaces in filenames (like you have in the css filename) - either close it up or use hyphens or underscores. When using fixed width side columns, also make sure that the width of these is sensible for smaller resolutions - the 375px wide left column is a little too wide for decent content width even on my 19" monitor, and for the purposes of this discussion, I have narrowed it to the same as the right column.
As the left and right columns will have to be floated left and right, they will need to come before the content column in the html. Marking up the html logically, we can arrive at :
Here everything except the footer is surrounded by a wrapper div (a requirement of making the 100% minimum height work), and the left and right column divs are before the content div. The #footerpush div is also a requirement to make the 100% minimum height work.
Note also I used a html 4.01 strict doctype - arguably the most appropriate to use at this point in time. As this uses a transparent png file, and other small hacks will be required for IE6 to comply, I have also linked an extra stylesheet via a conditional comment that only IE6 and below will see.
Here I started with the universal selector to zero ALL browser-applied default margins and padding from everything for an even start point. Next I set the height of html and body to 100%, so there is a reference height (my point no 3 above). The body then gets the usual font base and the background colour of the side columns are the body background (as the side column won't really extend full height, it will just look like they do). A min-width is also set here so that the content area does not squash too small when the window size is reduced. A default bottom margin is also added back to any paragraphs (using only bottom margin gets around margin collapse issues with containers).
Now for the tricky bit.
The #wrapper is set to a minimum height of 100%, and given side margins equal to the width of the side columns, as well as side borders. The background colour here is what will show through behind the content div (which also in reality may not extend full width either). Whilst this may appear to constrain the entire site in a small width, more trickery follows.
The #header div is given the correct height and bottom border and negative side margins equal to the side column width plus wrapper border width, effectively pulling it back out full screen width (one part of the above mentioned trickery). The relative position ensures the width is in front of everything. The #logo span containing the logo image (the span is needed to apply an IE6 correction later) is then floated to the left, and so is the <h1>.
The #leftbar is given the width, including some padding, and floated left. A negative left margin equal to its width plus right padding minus wrapper border width, pulls it out to the side of the wrapper div (but it still overlaps the wrapper border - required so that it can still push the footer down in some browsers). Note there is no background colour - the body colour shows through here. The #rightbar is floated right and pulled further out to the right in exactly the same way. Relative position on both of these again ensures they appear in front on all browsers.
The content div now just sits naturally with #wrapper, and only needs a little padding (the background colour of wrapper is showing through here).
For the last of the trickery, the #footer div, after being given its height and top border, is pulled up from below the bottom of the page (remember it follows the #wrapper which is full screen height) with a negative top margin equal to its height and border height. To avoid the footer covering any content, the #footerpush div is made the same height.
This works in all modern browsers, being fluid in width down to 920px wide, and filling the entire height of the screen without scrollbars unless the content pushes the footer down. Of course, there are still problems with IE6, and I discuss those next post.
First problem for IE6 is that it doesn't understand Min-width, so an IE-specific expression can be used to set the width of the body to 920px should the default "auto" setting be too small.
Next, IE6 also doesn't understand min-height, but it has a bug where it treats height like min-height, so we can just give the #wrapper 100% height.
As IE6 does not handle png transparency natively, the AlphaImageLoader filter that is part of DirectX can be used, and this is why the span around the image is needed. The image itself is made invisible by setting the opacity to zero, and then the image can be applied to the span via the filter to show its transparency.
See if all this works for what you want to achieve.