|
banko -> RE: css width property help (5/14/2006 18:03:06)
|
*******************
BTW - CSS layouts are still straight HTML - in fact they're better HTML because you get rid of all that extra inline stuff that you don't really need! Also - divs behave in the same way as tables as far as horizontal expansion goes - they'll expand until something stops them unless you give a certain width. If you give them a width of 100% and they are contained within another div then they'll only expand as far as they can within that div.
*******************
This statement is simply untrue. Every basic example and complaint i see on the net prooves the exact opposite of this statement.
Tables set at 100 percent expand until stopped by an object, OR END OF WINDOW!
HUGE difference from div's and span's that are set at 100%. The browser takes the Window width in pixels and replaces the 100% with that value!
Example:
<html>
<body>
<div style="margin: 0px 0px 0px 100px; width: 100%; height: 100%"></div>
</body>
<html>
When reading the above code you would think you div object would start at the 100th pixel mark from the left and consume right until reaching the end of the browser.
However this is simply not the case. Since the 100% is replaced with the value of the windows full width our object now goes past the edge of the browser 100 pixels!
But lets do one better, lets compare tables to Div's
Enter both codes into a file and view in the browser
code 1:
<div style="width: 100%; height: 100%; background-color: orange;">
<div style="width: 170px; background-color: green; float: left;"> </div>
<div style="width: 100%; background-color: yellow; float: left;"> </div>
</div>
code 2:
<table width="100%" height="100%">
<tr>
<td width="170px;" bgcolor="green"> </td>
<td bgcolor="yellow"> </td>
</tr>
</table>
Now comparing these two code segments, it should be even more obvous. Code 2 consumes the entire screen with no scroll bars. It is perfectly nested and the cells both scale the full height of 100%
Code 1 on the other hand is a disaster in every way imaginable. Number one, because the browser assumed i wanted the width of the browser window, it automatically replaced the value of 100% with it, making the second imbedded div to long so it gets pushed down below the preceeding div tag before it. Number two neither dives took any value for height, but were forced open through the , saddly without that we wouldn't even have the height of one charicter let alone for full screen that we had asked for.
Now as i have told many many people in the past, I have no problems with CSS .... I LOVE CSS
and as much as i would love to blaim IE and Microsoft, this is not their fault either.
This is W3C demanding that something be made a standard LONG before it was ready. As a result we have a thousand sites out there specifically geered at "hacking" browsers, so their content can be shown properly.
By the way I my original question, there is no answer for. This is one of those things that simply can not be hacked. You have to write lines and lines of code nesting objects, when all you should of had to do is state 100%
|
|
|
|
