Alright, I'm trying to work on a design in which the middle column has a fixed width and remains centered, while the columns to either side of that width stretch to fill the remaining width on the browser. Does anyone know how to do this? I can do it easily enough on a 2 column design, but everything I try to setup fails to work for me. the right side column always winds up floating down below the other two. Any ideas, I'm getting really frustrated with this here. if somebody can get this working fo rme i'd be willing to paypal them a few bucks...
Because I can't see your style sheet, I am not positive but normally when one or two columns drop down below the other columns, it is because the widths do not add up mathematically. For instance, if your theme is 850 width but when you add up the 3 columns together, it comes to 851 or higher, the one column will drop below. Also, if you have used borders in your columns, they will factor into the equation as well, meaning that they have to be added on to the total.
i understand the width issue, but the problem i'm facing here is that i need one fixed width column in between two resizeable columns, which i just can't figure out, and i'm not sure how the play the left and right columns off the fixed width of the center column on a 100% width page.
Set short columns to width: % and the fixed width to its width. All should be float:left. Here's the CSS. Put a real doctype on there and make it a real page. This is just an example. <html> <head> <style> .sidebar { width: 25%; height: 40%; border: black solid 1px; float:left; margin-left: 1em; } .content { width: 400px; height: 40%; border: black solid 1px; float:left; margin-left: 1em; } </style> </head> <body> <div class="sidebar"> </div> <div class="content"> </div> <div class="sidebar"> </div> </body> </html> Code (markup):
thats pretty close to what i worked out on my own, but it doesn't seem to serve the necessary purpose. i need the center column to remain centered. http://home.live.com/?mkt=en-ca is the perfect example, but i can't seem to narrow down the code to figure out how to get this type of setup.
Put a wrapper around it that's fixed width if you don't want it to drop down. Here this does it, the example is full page but should be able to scale it down. http://www.ultrashock.com/forums/cl...yout-fixed-center-left-right-fluid-91876.html And BTW, your example page is cheating. They use tables to create the columns. Much as I dislike the idea, it might be the best quick solution.
I think this will probably get you pretty darn close. http://blog.html.it/layoutgala/ Look at example 1. You would probably need to put another div inside the center container and give it a fixed width. If that doesn't give you the result you want, then you will probably be best off going with a table (though I hate to do it). Personally, if I can't get the design I want with a tableless layout, I usually change the site design. I just hate maintaining sites that use tables.
Couldn't a wrapper div work? #wrapper { width: 90%; position: absolute; } Code (markup): Something along those lines with content and two sidebars inside? Forgive me if im wrong, new to the css business.
The wrapper part would. The absolute positioning generally wouldn't, because where that wrapper's sitting on the page would need to change depending on screen width. With your above example, you didn't say where it's positioned, so the default is 0 0 (top left). That means you'll always have this 10% of nothing on the right side (tho if the body background is the same colour as that right column, it might not be really noticable...) Three left floats gives the flexibility needed. The tables start coming in when these three need to be 100% height. CSS can do the widths no problem. It's heights... and since the two sides are variable in width, it would be difficult (tho I don't think impossible) to do faux columns to simulate 100% height. It wouldn't work in IE but for fun you could try display: table and use the others too (display: table-row, display: table-cell). That would be interesting.
haha stomme, i was just saying position absolute because it just put more into it. i meant like center it, but i couldnt look up all the center stuff that i have mine to center because i was posting on my wii. [offtopic] I am having a similar problem, except with 2 columns, stomme i sent you a pm, if you dont feel like doing anything to it dont worry, but i was just wondering since you were so helpful last time [/offtopic]