|
| |
|
|
banko
Posts: 2
Joined: 5/14/2006
Status: offline
 |
css width property help - 5/14/2006 14:40:59
Hello everyone,
I need to recreate our website layout using css layouts and positioning. There seems to be lots of examples out there on full pages, but I am having a real hard time getting answers to basic questions and limitations.
Example:
#test {
position: absolute;
top: 100px;
left: 100px;
width: ?
height: ?
}
What do I put in the width and height if i want it to take up the rest of the "remaining" window space???
See when working with straight html this answer is quite simple... you say 100% for both and the table or object takes the size of the "available" space!
However, you put 100% here for width and the browser assumes that you want it equal to the browser width, which lets face it, is dead wrong! The only time you would ever want the browser width is if you are at the left most position and wanted to take the available width not used, so why not default it to remaining width?
As for the height... if you dont set an exact pixel value no browser treats it the same.
Anyway long and short of it is.... what the heck do i put in for the width and height in the above example, to fill the remaining window space.
|
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: css width property help - 5/14/2006 16:25:10
It's hard to judge what the right advice is just seeing that little snippet of code - can you give us a url where we can see the rest of it, failing that the rest of the Markup and CSS plus exactly what look you're aiming at for your site?
Also - using absolute positioning can cause you endless headaches as it can make your layout very fragile and easy to break. It's not always bad, it's just not as easy as you'd think it is. I personally only ever use it for small stuff like positioning a search box for instance just so I don't have to think too hard!!
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
banko
Posts: 2
Joined: 5/14/2006
Status: offline
|
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%
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
