Forum Moderators: not2easy
I thought I was attempting something simple...I wanted a 2 column design that would do the following:
1) Would resize to monitor resolution.
2) Left column and center column would increase in height to whichever was longer.
3) left column would have a fixed width of in pixels, the main/center column would increase/decrease in size based on resolution.
Ok, I know it is out there, I know I missed it, can someone point me in the right direction?
Thanks.
Kevin
The fixor [thefixor.com]
Has some excellent links for you to follow on many different css things.
CSS Vault [cssvault.com]
Has some more excellent links to follow through on.
Also if you go to A list aparts site, you can find some information on there as well.
I hope that these links help you out. Just follow through on the links on their pages if you don't find what you are looking for and I am sure you will find a layout that you can look at to help you out.
CSS 2 column liquid layout [google.com]
See SuzyUK's post here
[webmasterworld.com...]
There is a good bit out there, you just have to take the time to put in the correct search terms to find it.
resize to monitor resolution
In order to do this, you first have to establish a way for your web page to KNOW the screen resolution of each user, then ALTER the width of your element to match, and there you are solidly out of the realm of CSS and into the realm of javaScript or php (or perl/cgi).
The links and reference provided by 4css and marcia will show you ways to make a liquid two column layout that resizes to browser window size, but not monitor resolution.
Consider this: liquid layouts are based on relative sizing of container <div>s, meaning you use either percentages or EMs. So if you set your main container <div> to be 80% of the browser window, it will take up 80% of the window, however big the window is. At higher resolutions, the window is bigger, and therefor so is the container.
So really, by using relative sizing, you get the EFFECT I think you're loking for without having to get into scripting issues.
Here's an easy solution: set up your layout so that the fixed width left-column floats to the left (and comes first in the code), and the liquid content column has (a)width 100% and (b)margin-left equal to the width of the left-column. Put them both into a container <div> set to be whatever PERCENTAGE of the browser window you want to the page to occupy.
html:
<div id="container>
<div id="left-nav"></div>
<div id="content"></div>
</div>
css:
#container{
float:left; /*so #container stretches to contain the floated left-nav*/
width: 90%;
}
#left-nav{
float:left;
width:200px;
}
#content{
width: 100%;
margin-left: 200px;
}
Then go to A List Apart and look at the article "Faux Columns" by Dan Cedarholm to see how to make the floated left-nav visually extend to the height of the content.
Oh, and just for the record...
What you are describing is a table.
>search
Google is SO good if you put the right combo of targeted words in. You can find anything at WebmasterWorld that way.
Can you sniff for the resolution and serve a different stylesheet
Yes, but that would require writing a different stylesheet for every possible browser resolution. An 'easier' way would be to detect the resolution, then use javaScript and the Document Object Model to dynamically rewrite the style rules that need to change.
If you're really interested in this option, I would head over to the JS forum and ask around for specific tips there. I don't personally use methods like this. I much prefer fixed width layouts and don't have a lot of confidence that a JS script like that would reliably cover every possible configuration.
And anyway, using percentages for widths gives the same effect without all the hoo-haa.
You are describing what I used as the solution...when I said resize per resolution, I meant a liquid layout...what I was wondering is if there was a way without using faux columns to accomplish this feat...apparently not...and tables can suck it! ;)
Kevin
a way without using faux columns to accomplish this feat
Absolute positioning or explicit height values spring to mind as other, although far inferior, solutions. On my firm site, I decided to go with an explicit height, which works fine (I used something like 1000px on the nav sidebar) except that you have to scroll down to see the footer. For me, this is no big deal (footer, shmooter) but I doubt I would ever use that technique on a client's site.
<added>After writing this post, I went and conducted a few tests on the layout of my site and have added a faux column to compensate for the rare occasion that the content goes longer than 1000px. It would seem that Faux COlumns really are the only (fortunately simple) way to go.</added>
