The top bar and footer are ok but i am having troubles with main content.Menu and header are also fine in big resolutions. If i resize the window,the content will push the sidebar to bottom. Also having troubles to put the main content into the container. If it is too big it is also pushes to bottom.

Here is my last code.I have made a lot of expierences so it will probably have lots of things wrong.

It will be useful but wont solve all my problems. I still having troubles setting the widths of the floated collumns. If the content is too big it pushes the sidbars or content to bottom.

I could try max-width them but i am thinking there might be better solutions.As i said i am sure my code can be widely improved and have missing things.

RyanReese
—
2010-02-24T18:26:43Z —
#4

min-width doesn't work in IE6 but it does in IE7/8.

If you're worrying about it pushing down, then you can move the #main-content div after sidebar and then unfloat the #main-content. Then give it a 191px right margin.

Then the parent can have a min-width to whatever you set :).

Popovich88
—
2010-02-25T09:48:05Z —
#5

Thanks for the unfloat main content tip. It does what i want.:D

A last question not related to this project: Lets say i have 2 floated collumns,main content fluid and sidebar fixed.Is there any way that if the fluid content is too big creates a scroller bar instead of pushing the sidebar down?

Many thanks for the help

PaulOB
—
2010-02-25T11:52:21Z —
#6

Popovich88 said:

A last question not related to this project: Lets say i have 2 floated collumns,main content fluid and sidebar fixed.Is there any way that if the fluid content is too big creates a scroller bar instead of pushing the sidebar down?

Hi,

You'll need to qualify that with a basic code example as I can see a number of ways that your request could be interpreted.:)

Are you talking about horizontal scrolling or vertical scrolling for a start.

When you say two floated columns with one a fixed width and one a fluid width - how are you making the fluid width floated element exactly?

In both cases to effect a scrollbar would of course mean limiting the dimensions and setting overflow somwehere. Of course you can't really make one element react to scroll dependent on the size of the other which is why I'd like t see a rough example of what you mean before posting any code.

Popovich88
—
2010-02-25T15:29:02Z —
#7

Hi,

You'll need to qualify that with a basic code example as I can see a number of ways that your request could be interpreted.

Are you talking about horizontal scrolling or vertical scrolling for a start.

When you say two floated columns with one a fixed width and one a fluid width - how are you making the fluid width floated element exactly?

In both cases to effect a scrollbar would of course mean limiting the dimensions and setting overflow somwehere. Of course you can't really make one element react to scroll dependent on the size of the other which is why I'd like t see a rough example of what you mean before posting any code.

I mean having two collumns side by side. The main one set in % width floated left and the sidebar with fixed with floated right.If i make my browser window smaller the main collumn might push the fixed collumn down. I wish to add a horizontal scrollbar to the main collumn instead of pushing the sidebar down.

In the meantime i keep designing my site and it looks pretty good in all browsers. Just some small problems in ie6.

if the content of the main collumn is bigger than the height of sidebar it starts "invading" the left collumn like there is only one collumn.

And my top bar like duplicates its size. The bar itself is correctly displayedbut ie6 created a "double" grey bar below.

Popovich88
—
2010-02-25T16:42:09Z —
#8

I have removed overflow:auto and it looks great in ie6 but now the most recent browsershave the old ie6 problem.

Also i would prefer to have the content stays in the middle collumn instead of adding scrollbar.

I am sure there is something about the floats.

PaulOB
—
2010-02-25T16:53:53Z —
#9

Popovich88 said:

I mean having two collumns side by side. The main one set in % width floated left and the sidebar with fixed with floated right.If i make my browser window smaller the main collumn might push the fixed collumn down. I wish to add a horizontal scrollbar to the main collumn instead of pushing the sidebar down.

You mean like this example. If you close the window the float does not drop.

PaulOB
—
2010-02-25T17:11:13Z —
#10

Popovich88 said:

I mean having two collumns side by side. The main one set in % width floated left and the sidebar with fixed with floated right.

Hi,

That's why I asked how you were doing this because you can't have 2 floated columns side by side where one is floated with a fixed width and the other one has no width. The float with no width will always try to be 100% wide and therefore is not suitable for fluid content.

You can't use percentage dimensions for one and px for the other because that will never add up to 100%.

What you need to do is float one column and then leave the other column unfloated with either a margin to clear the float or overflow:hidden and haslayout added so that it forms a rectangular block to the side. remember though that the float html has to come first in context. If you want to use source order then you would need to float with 100% width and use complicated negative margin techniques to achieve it. However you would still get a float drop in IE6 unless you used a min-width routine to stop the layout shrinking before it dropped.

You should not be setting heights at all just to make things equal as that will never work. Have a look through the [3 col sticky thread for[URL="http://www.pmob.co.uk/temp/polygon.htm"] various methods](http://www.sitepoint.com/forums/showthread.php?t=143801) of achieveing what you want.

Stomme_poes
—
2010-02-25T18:40:27Z —
#11

The float with no width will always try to be 100% wide and therefore is not suitable for fluid content.

What?

I thought they'd shrink-wrap to content, and that shrink-wrapping isn't exactly the same cross-browser if the content is wrappable text. If I could get floats to try to be 100% wide it would solve some issues I have : )

RyanReese
—
2010-02-25T18:50:35Z —
#12

I think Paul meant that the float will shrinkwrap, though if it can it will try to expand all the way to 100% wide, if said element has enough content :)'

Just make a page with a floated <p>. With a lot of text. That's it, oh and a border to see it..it will go 100% wide if enough text is in it

Stomme_poes
—
2010-02-25T19:04:04Z —
#13

Depends on the browser.

I had someone asking me what the difference was between IE and FF on a page where there was a widthless float with text.

IE let the whole line of text go without wrapping, so it made the float as wide as the person (not really a client of mine) wanted. But FF wrapped the text pretty quickly, making the box too narrow for the person's liking.

*edit I should mention this was a page where there was some set-width sidebar and the widthless float was next to it.

PaulOB
—
2010-02-25T20:00:59Z —
#14

mallory said:

I thought they'd shrink-wrap to content, and that shrink-wrapping isn't exactly the same cross-browser if the content is wrappable text. If I could get floats to try to be 100% wide it would solve some issues I have : )

You misunderstood what I meant

It's as Ryan said and although a float will shrinkwrap its content it will just keep on expanding with that fluid content until it reaches 100%.

You can't put a widthless float next to a fixed width float and expect it to only fill the available space. It will try and be 100% wide if it has fluid content pushing it wide and eventually it will displace the other float as it seeks to take up all 100% of the space.

However in IE6 and IE7 the widthless float will fill only the remaining space if it is the second float in sequence on that line.

In all browsers except Ie6 and 7 the widthless float will have dropped down to a new line. IE6 and 7 let the widthless float fill the space up to the other float (which is incorrect behaviour.)

If the html is reversed of course then the widthless float just goes to 100% wide everywhere (assuming the text is as wide as the monitor of course).

popovich88 said:

I am sure there is something about the floats.

I have put up an example here that shows one way of doing the layout you wanted and achieving equal columns (just view source). However it is a little complicated and source dependent and has a caveat in that the header and top bar must be a fixed height because I have pulled the right column upwards by the header height.

I also added the min-width fix for IE6 to stop it breaking.

An easier solution would be to imitate the equal columns with background images on nested containers. Or use the absolute overlay method shown here.

Thanks all for the help. Just one more question. I have divided my main content into 2 collumns. One floated left and one unfloated. But if my content is too big it passes below the footer. only ie6 works fine. What could be the problem?

PaulOB
—
2010-02-26T12:44:06Z —
#17

Popovich88 said:

Thanks all for the help. Just one more question. I have divided my main content into 2 collumns. One floated left and one unfloated. But if my content is too big it passes below the footer. only ie6 works fine. What could be the problem?

We'd need to see your code to debug properly.:)

Have you cleared your floats?

Have you set heights and then exceeded them?

It could be many things and we'd need to see you revised code to debug properly - do you have a current link.

In case you missed it I actually made you a demo that matches your drawing exactly.