3 replies [Last post]
dagenius
Offline
newbie
usa
Last seen: 13 years 33 weeks ago
usa
Joined: 2008-10-02
Posts: 2
Points: 0

I have my site:

http://dageniusmarketer.com

when you try to scale the browser window, the 3 columns shrink accordingly to keep their respective spacing. This is cool......except....that i only want the middle column to shrink horizontally when the browser window shrinks, and not the left sidebar nor right sidebar. As it is right now, im using % values for the widths, when I really dont think that is whats going to give me the result i need. I tried using fixed pixel widths, but then when you scale it, the columns overlap each other, and that is not what i want at all. I want the left sidebar to stay a consistent size all the time no matter what, and the right sidebar to stay a consistent size no matter what. I only want the middle column with my posts to shrink in between the two, with no overlap. How can I achieve this? This is the code I am currently using at the moment:

div#content {
	margin: -10px 22% 5px 21%;
        padding-left: 0px;
	text-align: left;
	min-height: 500px;
	height: auto !important;
	height: 100%;
        width: 54.5%;
        float: left;
        position: relative;
        left: 32px;
	overflow: hidden;
        border: 1px dotted #ffffff;
}
div#sidebar {
	float: left;
	width: 20.75%;
	margin-top: -10px;
	margin-left: -21%;
	text-align: left;
        border: 1px dotted #ffffff;
}
div#navigation {
	float: left;
	width: 22.5%;
	margin-top: -10px;
	margin-left: -99.75%;
	text-align: left;
        border: 1px dotted #ffffff;
}

Any and all help to solve the problem is greatly appreciated. Thanks.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Well now, if the two

Well now, if the two sidebars do not lose their widths, then at some point, simple physics would have them crash into each other. Whatever you want them to do when someone's browser is 400px wide or smaller (as we can resize our browsers to any ridiculous width), you need to state that. Computers be dumb, they don't know any better.

One thing you could do is set a min-width on your #container (I'm assuming these three divs are in a container or wrapper of some sort? If not, wait). That width could be when the middle part collapses completely and you only have room for the two sidebars side by side. Or something a bit bigger, so the middle part is at least as wide as a word or something.

Or if you don't have a wrapper/container and don't want one, then your min-width would have to be on your middle part itself.

I like the wrapper option better because then you can be really smart: no width or float at all on the middle part, only side margins equal to the widths of your (px or even em-width) sidebars. Left container floated left and right container floated right OR both come after the middle part in the code and both are floated left but the left side is also given a left margin of -100% while the right side just gets a negative margin equal to its own width (if you are not new to CSS, this is a very nice technique). OR a combination of the two... if any of these sound like a useful idea, post here and let us know, if you're not familiar with them.

This stuff makes me unhappy:

	min-height: 500px;
	height: auto !important;
	height: 100%;

It's a necessary hack but a clumsy one (my opinion of course).
I like
#content {
min-height: 500px;
}
* html #content {height: 100%;}
Just because it feels better to me to make stuff for IE6 explicitly for IE6.

This stuff makes me really really unhappy:

        float: left;
        position: relative;
        left: 32px;

When using position: relative, you're playing with fire. Most people don't notice that when they "move" a container with the coordinates that they are not actually moving the container itself, but its visual representation (another box is "generated" when you state position: relative). Better to really move the real box with pure margins and floats in the first place (in general).

Of course this is my personal opinion, hating on position: relative. There are a few CSS tricks that use it, and I got burned by one when a new browser decided not to be cool with it, but in general I think it's not the best method.

That aside, there's more likelihood for evil to rear its ugly head when mixing px and %, or px and ems, or px and anyone who can scale.

I'm no expert, but I fake one on teh Internets

dagenius
Offline
newbie
usa
Last seen: 13 years 33 weeks ago
usa
Joined: 2008-10-02
Posts: 2
Points: 0

I took your advice and

I took your advice and removed everything you said to remove. It all works. I already had a container in place, and i set its min width and that stopped all the overlapping. You can take a look at it now

http://dageniusmarketer.com

But....I still cant figure out how.....at the very least, make the left sidebar retain its width and not have the middle column overlap it upon shrinkage. It seems the only solution was to fix the container width at a set min-width, which keeps the page from shrinking whatsoever when the browser window is scaled. Its oooookkkkk, and I guess will work for now......but not really the 100% solution i would like.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Well, your min-width is

Well, your min-width is pretty wide. The left sidebar should be able to retain its width if you have set a width in px or em on it. I can't get the middle column to overlap anyone... and the only way it COULD is if it had a higher z-index than the sidebar. Like, setting position: relative on a box gives it a naturally higher z-index than the static boxes on the page. I always forget if it's also higher than a float's z-index.

Ok, looking at your page, you're still using % for widths. That would mean your sidebars could collapse. Give them a set width in pixels and change your sidemargins of your main content to the same px (or a hair more).

Your main content isn't flexible at all because you did this:
max-width: 1200px;

min-width:1200px;

width: 97%;

Min-width = max-width so theres no difference, no flexibility. You might as well have said "width: 1200px;" or something.

But then you went ahead and said width: 97% which will override your earlier width statements cause they're not compatible. So you still have a not-very flex width.

I think you can let your middle part get as small as the width of the Flash you've got down there. I didn't measure it, but whatever the width is of that Flash, plus the px or em width of your sidebars, that should be the min-width of your container. Don't even set a max-width, just let the middle keep growing, but the new width could let your middle part shrink pretty far (and wrapper stays 100% of container so that's fine re the sidebars).

Let's say that Flash is 350px wide (I dunno, didn't measure it). Let's say one sidebar is 280px and the other a bit smaller, 250px. Total="880px" plus some side margins or padding between the boxes, let's say this is 900px wide. If you try to go smaller the middle may have to jump down because of stuff like the Flash or images which cannot get any smaller. The sidebars will not get overlapped, and they will stay at their prescribed widths.

So, try that.

I'm no expert, but I fake one on teh Internets