CSS Layout (Fluid, Fixed)
Regular
Posted: Wed, 2008-07-23 07:08
Hey All,
I'm trying to create a layout where the middle div has a fixed width (and is centered), but the left div can expand and contract all the way down to nothing if the browser is resized.
The reason is that I have a background image on the left that lines up with the content, but is blank on the right.
If anyone has any idea as to the best way to do this I would greatly appreciate it.
Thanks,
Jeff
Enthusiast
Posts: 267
Joined: 2008-07-18
Location: US
I believe this layout by
Posted: Wed, 2008-07-23 09:43
I believe this layout by Georg Sortun may work for you [1].
Note that there is an xml declaration above the doctype. It puts IE/6 in quirksmode. This is intentional, and should be retained just as it is.
http://www.gunlaug.no/tos/moa_27d.html
Regular
Posts: 11
Joined: 2008-07-23
Here is what I currently have...
Posted: Wed, 2008-07-23 13:58
I found a similar layout and tried it here.
http://mmmyeah.com/carraig_ridge/
It actually seems to work, other than the fact that when you size the browser the main content won't stop at the edge of the screen. This little issue makes it basically useless because I would like it to be like a normal website.
One thing I thought was perhaps approaching it slightly different in that I could have a background image as one normally would, then finding a way to put a div on the right with a while background that would basically cover the graphic underneath. This of course seems like a very amateurish solution.
The other option I tried was putting two position:absolute divs at 50%, and then centering the div as you normally would...but this of course doesn't work because you can't get the background div's to go behind the centered div.
There has to be a correct and current way of doing this that doesn't involve hacks or JS...anyone?
Regular
Posts: 11
Joined: 2008-07-23
#contentwrapper{
Posted: Wed, 2008-07-23 14:01
#contentwrapper{ float: left; width: 100%; margin-left: -30%; /*Set left margin to -(RightColumnWidth)*/ } #contentcolumn{ margin: 0 824px 0 30% /*Set margin to 0 (LeftColumnWidth) 0 (RightColumnWidth)*/ } #leftcolumn{ float: left; width: 824px; /*Width of left column in pixels*/ margin-left: -824px; /*Set left margin to -(LeftColumnWidth)*/ background: #C8FC98; } #rightcolumn{ float: left; width: 30%; /*Width of right column in percentage*/ background: #FDE95E; }Here is the CSS for that site I posted above. I really feel that using negative margins is very outdated and I'm leery of the support it may have. I would like to find a more current solution if possible.
Guru
Posts: 2834
Joined: 2004-09-01
Location: MA, USA
eliminate the left column.
Posted: Wed, 2008-07-23 16:38
eliminate the left column. create an image 2000px wide containing your lines on the left and nothing (or white) on the right. place it on the body centered and you're done.
Regular
Posts: 11
Joined: 2008-07-23
I'm not sure that'll work.
Posted: Wed, 2008-07-23 17:33
I'm not sure that'll work. How do you simply take out the left column?
If I make an image 2000px wide, then I have to have a column on the right of the main content to "hide" the rest of the background image, but it's the same issue as before. You can't just have a random div on the right can you?
If I get what you're saying you put two divs beside each other, and then center it so the content is centered. The thing I don't get is how you get the right div to expand and contract so it hides the image, and everything stays centered.
Needless to say that is a tad confusing what you said to me.
Guru
Posts: 2834
Joined: 2004-09-01
Location: MA, USA
I'm assuming you want your
Posted: Wed, 2008-07-23 18:42
I'm assuming you want your design to be similar to that you posted above. You want the three boxes to come from the left hand side of the browser window up to the centered content area and have nothing (white) to the right of content area.
Don't think of it as left and center column. It's just a centered single column. Give it a width and use auto margins to center it. To give the impression that the boxes go left, use an image on the body. The image should be plenty wide enough to cover wide screen browsing (2000px should be plenty). The left half of this image contains the lines making up the 'boxes'. The right half of the image is just white. Despite the pixel size of the image it should be a fairly small file size. Center this image on the body background and down enough to match the image in the content area.
Regular
Posts: 11
Joined: 2008-07-23
Right right...that's how you
Posted: Wed, 2008-07-23 19:15
Right right...that's how you would normally do it right...the only difference is that the image doesn't come out the other side. What I'm afraid will happen though is that when the user resizes the browser the background image will come out the other side of the centered div.
There has to be something to hide that image so if it does come out on the right size it won't show.
Guru
Posts: 2834
Joined: 2004-09-01
Location: MA, USA
it can't come out the other
Posted: Wed, 2008-07-23 19:40
it can't come out the other side if it's centered on the body background. The left and right sides of the background image will be clipped.
Regular
Posts: 11
Joined: 2008-07-23
hmmmm.....I think I'm
Posted: Wed, 2008-07-23 19:42
hmmmm.....I think I'm picking up what you be throwin down!
I'll try that!
Thanks a lot!