CSS sizing for resolution 2

[scitech]

Is it possible to use %(percentage) for sizing of <div>'s
so that resolutions all just fill the screen?
Faq 215-4537 thanks BlindPete, gives some script that switches on resolution size to another CSS style page, but as I'm lazy and only want to maintain one style page, as this solution is a never ending search for "just how many screen resolutions is it possible to have?" and the style sheets to match!!

 

[Vragabond]

If you are using CSS, you have many units at your disposal. From the fixed ones: px, cm, in... to relative: % and em (relative to the letter m in current font). Just know that % in height only works when you have fixed height of the parent. Say you have a div that is 500px high and you want 30% filled by another div. That is possible. Without the 500px parent, that is not possible. Width works ok without the fixed parent. I use % in my websites without any problems.

 

[taylorantone]

Of course. Percentages are used whenever you want a fluid layout rather than a fixed width. Give the parent div a % width, and either don't define the child div's width or give it a % value also. The main page to

http://www.csszengarden.com

is a good example. Fits any resolution.

 

[scitech]

So are you saying:-
that I can have 100% width but must state the Height in px as my full size, and put all my other <div>'s inside this with %width and %height.
Sorry to be dense, I cannot remember if I have tryed this before and it did not work.

 

[cLFlaVA]

Correct. 100% width works fine, but 100% height is not valid without a surrounding, concrete element.

You can either set a static height to a surrounding container (height: 500px) or you can set the height when the page loads, using JavaScript. Then, you can use 100% height with all child elements of the surrounding container.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[Vragabond]

Ok, here's how it goes. Standards assume pages are to be read similar to normal text, that is with a certain width and expanding downward to accomodate all the text. In that way, the height should not be specified since limiting your page both with width and height will make it impossible to accomodate if you have more text. That is why setting height does not work. Not setting the height assumes the mode auto, which means: expand to fit all the text. That is all you need. You just need to control the width to create a fluid design -- your height will adjust properly to accomodate everything. If you choose to go the other way... and need something to have a percentage height, you must have a parent element with a fixed (px or whatever) height in order for css to know how many percent of what to take. The height of the browser window and/or client screen does not apply here. Hope it helps.

 

[taylorantone]

Once you move into the designing your layout with div's, you're introducing a restricting element; a container which can be styled and sized to fit your needs.

Vragabond said it all. Height isn't anything you really have to put much thought into usually because web browsers will automatically adjust for this--the more content you have, the longer the page will be.

Can you describe your goal with a bit more detail? Maybe point us to a page with an example of what you're wanting to do?

 

[glenmac]

Correct. 100% width works fine, but 100% height is not valid without a surrounding, concrete element.

Hmm this seems to work for me in IE, or am I misunderstanding.

<style>
#calendar {
    border: 1px solid black;
    background-color: #CCCCCC;
   [COLOR=red] height: 100%; [/color] 
    }

#calendar .month {
    margin: 10px;
    border: 1px solid black;
    width: 45%;
    [COLOR=red]height: 50%;[/color]
    float: left;
    overflow: auto;
    background-color: white;
    }
#calendar .month1 {
    margin: 10px;
    border: 1px solid black;
    width: 45%;
    [COLOR=red]height: 50%;[/color]
    float: right;
    overflow: auto;
    background-color: white;
    }

#calendar .month h3 {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid black;
    color: white;
    background-color: #888888;
    text-align: center;
    }
#calendar .month1 h3 {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid black;
    color: white;
    background-color: #888888;
    text-align: center;
    }

#calendar .month .content {
    margin: 0;
    padding: 5px;
    }
#calendar .month1 .content {
    margin: 0;
    padding: 5px;
    }

</style><div id="calendar">
 <div class="month">
  <h3>January</h3>
  <div class="content">
   Filler text filler text filler text filler text <br />
   Filler text <br />
   filler text filler text filler text <br />
   Filler text filler text filler text filler <br />
   text
  </div>
 </div>
 <div class="month1">
  <h3>February</h3>
  <div class="content">
   Filler text filler text filler text filler text <br />
   Filler text <br />
   filler text filler text filler text <br />
   Filler text filler text filler text filler <br />
   text
  </div>

slight changes to chessbots code in an earlier post

Glen

http://lantzvillecomputers.ca

 

[taylorantone]

IE is not really standards-compliant when it comes to height. As an experiment, take a div and put inside it two divs. Float the both and give them some content so they have some length to them. View that page in both IE and FireFox. You'll notice that IE automatically expands the parent div to fit the two floaters. Mozilla does not.

My point is that using IE to explain this isn't a good choice.

 

[cLFlaVA]

glenmac, are you using a complete doctype?

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[glenmac]

Thanks for clearing it up for me taylorantone, a star for you.

Glen

http://lantzvillecomputers.ca

 

[glenmac]

Ahh!!!!! cLFlaVa another interesting point thanks. When I use a doctype it doesn't work. I'm learning. A star for you !

Glen

http://lantzvillecomputers.ca

 

[cLFlaVA]

glad to help.


*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[scitech]

Thanks for the help, it works of course!!