CSS Auto-sizing

[gerkintrigg]

Hello!

I am trying to sweep away my safety blanket by designing PURELY in CSS with php, so no tables AT ALL.

I think I'm doing quite well at the moment but for one problem.

 

My website in development is: http://magic2k.com/cornwall_dvd/index.php and it does most of what I want.

 

I think I get the position: relative / absolute stuff, but I want the main white body to size automatically, but be no smaller than 600 pixels, whichever is the greater. Is there a way of doing this in CSS? (and if so, how?)

 

If I change the style sheet, the white body just vanishes.

 

Please help!

Thanks,

Neil

[dropfaith]

<style type="text/css">
.classname {min-width:600px;width:70%;}
</style>

 

something along those lines that code above will make it 70% of available space unless that 70 percent goes below 600px then defaults to the min 600

[dropfaith]

ive also never been a fan of absolute pos  i just tend to use floats to move my divs in place..

 

.leftnav {float:leftwidth:30%;}

.content {width:70%;min-width:600px;}

[gerkintrigg]

that's good, but on: http://magic2k.com/cornwall_dvd/index.php the 2's just slide off the bottom of the white part of the page. I want to automatically make the white part bigger depending on what I output in the main portion of the site.

 

It does it automatically in table layouts, where the table just expands to fit whatever's inside it.

:\

[dropfaith]

oh crap  i somehow read width was the issue

 

min-height:600px; height:auto;

 

or use height:600px;overflow:auto which will make a scrollbar if content is over 600

[dbrimlow]

that's good, but on: http://magic2k.com/cornwall_dvd/index.php the 2's just slide off the bottom of the white part of the page. I want to automatically make the white part bigger depending on what I output in the main portion of the site.

 

It does it automatically in table layouts, where the table just expands to fit whatever's inside it.

:\

 

This is why using position:absolute for a wire-frame layout is BAD!

 

Absolute positioning is outside of the flow of html and has no relation whatsoever to the tags, text and html in the markup ... it is OUTSIDE of the flow ... so of course it will never "auto-adjust".

 

Also, if you ever want to have a "liquid" or "elastic"layout (that completely auto sizes everthing based on monitor window size) you need to get away from fixed sizes and positioning.

 

You need to create a simple 2 column layout ... css layout 101 stuff. Two left floated columns.

 

Start at the place most of us did years ago ... maxdesign.com floatutorial

 

After that, check out all the other links and tutorials there ... listomatic will make navigation a snap.

 

 

 

 

 

 

[mikePhp]

this site doesn't work in safari...

 

its all over the place