Specialist-help for 2column flaoting-divs (next to each other) and variable size

[Chriss Cohn]

Hi, guys im trying this now since many hours, but somehow i cant get it to work.

Im preparing a forums template which should have the following things:

- centered
- 2 column div(left div is large for the board, right div is small for a ad-skyscraper)
- both divs in a variable size
- left and right around ~50px or so free space
- 1024px resolution users, shouldn't see the space left and right, or at least the space is very small they see, because the min-width of the board-div+the skyscraper is already filling 1000px width - and i want to keep it so!

So you see much like the current forum-template here at simplemachines.org/community, exept the ad-skyscraper.... 

Just basically i've done the follwoing:

1. created a "outer-div" which is around both the "board-div" and the "ad-div". Gave that div a max-width of 1600px, margin: 0 auto; for centering and a padding for left and right of 50px (to have the space i want). Also i added a overflow:hidden, because the "space" left and right combined with the other min-widths of "board-div" and "ad-div" is to large for 1024px resolutions.

2. created the "board-div" which has min-width of around 835px, gave it also "float:left"

3. created the "ad-div" which has a fixed width of 160px and gave it also "float:right"

So when i test this on a webserver it wont work.... the only thing really works is that the "ad-div" is positioned right of the "board-div".But then when i resize my window , the "board-div" wont change its size and only the "ad-div" is moving to right side with a huge space between the "ad-div" and the "board-div" appearing.

Please a little-bit of help would be not bad.....

[Chriss Cohn]

Ok guys, ive done some research and it seems that floating divs always need fixed widths. That is absoultely bad IMHO!
I have to now chngae my complete idea of my new Forums-theme....

IF anyone still knows a way (even if it is tough), please let me know.

Regards, Christian

[Kiphaas7]

http://blog.html.it/layoutgala/ [nofollow]

Particular this one
http://blog.html.it/layoutgala/LayoutGala26.html [nofollow]

That should give you a good headstart with both div's as percentage columns. If this one isn't what you need, look around on layoutgala to see if you can find what you need.

Also remember that min-width and max-width aren't supported by IE6.

[Chriss Cohn]

Thank you but i recently found out that the part you want to have other parts to float around, must be coded first.
Also i found a cool way to not using a clearing div or other object, this can be found here and works like a charm:
http://positioniseverything.net/easyclearing.html
Thanks anyway
Regards, Christian

[Kiphaas7]

Thank you but i recently found out that the part you want to have other parts to float around, must be coded first.
Also i found a cool way to not using a clearing div or other object, this can be found here and works like a charm:
http://positioniseverything.net/easyclearing.html [nofollow]
Thanks anyway
Regards, Christian

That method uses a lot of hacks, it is better to use the following:

http://www.quirksmode.org/css/clearing.html [nofollow]

[Chriss Cohn]

Thank you but i recently found out that the part you want to have other parts to float around, must be coded first.
Also i found a cool way to not using a clearing div or other object, this can be found here and works like a charm:
http://positioniseverything.net/easyclearing.html
Thanks anyway
Regards, Christian

That method uses a lot of hacks, it is better to use the following:

http://www.quirksmode.org/css/clearing.html

Nice link, but the method i use with those hacks is also working for the "problem child" IE under Mac.
I doubt the version you linked works also there like a charm......

Some should test it....

Regards, Christian