N
Noozer
I've placed a small example at:
http://members.shaw.ca/mystuff/test.htm
Code is also pasted below...
When the browser is not wide enough to fit all the DIV's the rightmost DIV
wraps below the first DIV. I've tried using the "white-space: nowrap"
directive in the main DIV's styling as well as in the BODY's styling with no
effect. The same thing happens when these DIV's are not contained within
another DIV. I've also investigated the "overflow" directive with little
success.
I assume that "white-space" affects only inline content and not block
content.
Is there any way to ensure that my DIV's don't move down below each other if
the browser is not wide enough (short of stuffing it all into a table)?
(PS Also noticed that IE doesn't apply the padding to the right side of the
"Maingroup" DIV. Firefox applies the padding, but the background colour does
not apply to all of the background of the "Maingroup" DIV. Firefox also does
not wrap the rightmost DIV the same as IE does when it doesn't fit into the
browser.)
Thx
<html>
<head>
</head>
<body>
<div id="Maingroup" style="float: left; white-space: nowrap; border: 1px
black solid; padding: 4px;"
<span class="SectionHead" style="display: block; padding: 2px;
background-color:#888;">This Group</span>
<div id="Group1" style="background-color:#F00; float: left;">
<p>Some stuff here</p>
<p>More stuff</p>
</div>
<div id="Group2" style="background-color:#0F0; float: left;
clear:right;">
More stuff here
</div>
<div id="Group3" style="background-color:#00F; float: left; white-space:
nowrap;">
Even more stuff
</div>
<span class="SectionFoot" style="display: block; clear:both;"> --- The
End --- </span>
<div>
</body>
</html>
http://members.shaw.ca/mystuff/test.htm
Code is also pasted below...
When the browser is not wide enough to fit all the DIV's the rightmost DIV
wraps below the first DIV. I've tried using the "white-space: nowrap"
directive in the main DIV's styling as well as in the BODY's styling with no
effect. The same thing happens when these DIV's are not contained within
another DIV. I've also investigated the "overflow" directive with little
success.
I assume that "white-space" affects only inline content and not block
content.
Is there any way to ensure that my DIV's don't move down below each other if
the browser is not wide enough (short of stuffing it all into a table)?
(PS Also noticed that IE doesn't apply the padding to the right side of the
"Maingroup" DIV. Firefox applies the padding, but the background colour does
not apply to all of the background of the "Maingroup" DIV. Firefox also does
not wrap the rightmost DIV the same as IE does when it doesn't fit into the
browser.)
Thx
<html>
<head>
</head>
<body>
<div id="Maingroup" style="float: left; white-space: nowrap; border: 1px
black solid; padding: 4px;"
<span class="SectionHead" style="display: block; padding: 2px;
background-color:#888;">This Group</span>
<div id="Group1" style="background-color:#F00; float: left;">
<p>Some stuff here</p>
<p>More stuff</p>
</div>
<div id="Group2" style="background-color:#0F0; float: left;
clear:right;">
More stuff here
</div>
<div id="Group3" style="background-color:#00F; float: left; white-space:
nowrap;">
Even more stuff
</div>
<span class="SectionFoot" style="display: block; clear:both;"> --- The
End --- </span>
<div>
</body>
</html>