Prob with CSS (Advanced)

I’ve been trying to create dual column layout for right to left layout.

I want the sidebar at the right to be absolute width and the content area at the left to be flexible one for different screen resolutions.

I’ve floated side bar to right and content to left but the content area always resize itself based on amount of text i have.

you can see the code yourself , i tried the margin trick but it just fix the sidebar

I could use percentage as measure system but i have 2px border on content DIV which makes that not possible from my view


#content {
}
#main {
float:left;
border-right:#99cc00 2px solid;
background-color:#FFF;
padding:2em 5em;
margin-right:200px;
}
#side {
margin-left:-200px;
width:200px;
float:right;
background-color:#333;
}

content <div> is a container for sidebar and main

I hope did not mess up whole thing in post so you can understand what i want.

I just want sidebar fixed size and main stretched without relating on amount of text in it to sidebar at any point i resize the browser window.



Thanks in advance guys.

dude try one of this ready to go layouts:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Here are some other links as well:

http://www.dynamicdrive.com/style/layouts/category/C10/
http://www.dynamicdrive.com/style/layouts/category/C9/
http://www.tjkdesign.com/articles/3cols.asp

Good luck.

soz guys you probably got me wrong

I want side bar fixed and main content area fluid, the problem is the main content area dependent on amount of text. If there is less than one full lie of text main content area will have a space between itself and sidebar which is fixed.

This is why i asked Advanced solution needed not just negative margin tricks.

thanks for your effort anyway, hopefully someone solved such stuff in past.

I am doing looking for the same comportment than you. Actualy here is how i do using "display:table" (and not "float").

The xhtml :


and an extract of the css :



This mostly work for Firefox. I did not have tested other brownser yet (i hope it’s not too bugy). The main layout problem is than, if the content of the left block is larger than [(min-width)-(right_collumn-width)] the the output is not correct anymore (too big images for Ex.).

Edit : Argh apparently Explorer 7 and before did not recognise display:table & display:table-cell Sorry this is defenitly not the good solution.

heh CSS3?

I would rather use columns if i could use CSS3 which most of browsers does not support.

all examples i find for fluid boxes ( auto stretching with browser window resize) are filled with text to show up at full width.

and if i have to show the search result from ajax search snippet which will show me half line all design will fecked up.

why not set width: 100% on your #main div and add padding to your #content div?

dont forget display:inline.
its a good trick you wouldnt expect to work out...

I dont understad why you are using a -margin on you right column either..
you should be able to set the right padding in the left column ..

Make sure you have a clear fix after your right column as well...:)

Never thought of using display:inline on div, used on lists..

Nice idea, then i wouldn’t be needed to use negative padding on margin