Forum Moderators: not2easy
How narrow does the window need to be sized? And I guess the only reason you want it jumping is to save space at lower sizes?
Do you want the list of links (or whatever that content is) to switch to horizontal spread instead of vertical after the jump? (I assume that'd be ideal)
A solution can be found using Javascript, though. on window size = whatever, remove float:right (assuming you put that div under the left div's code), and change it's width. Assuming the links in the list were also floated (and stacked), they would then spread out horizontally.
[edited by: Xapti at 5:38 am (utc) on April 22, 2007]
the wrapper (which would be the one you would then need to widen?) would be set to position: relative in order to become the containing block for right div, but then also the left div should be set to position: relative and given a z-index - this should ensure it always stays "on top" of the right div as the window narrows
something like:
CSS:
#wrap {
position: relative;
width: 80%;
margin: 0 auto;
border: 1px solid #f00;
}#right {
position: absolute;
width: 200px;
background: #ff0;
right: 10px;
top: 15px;
}#left {
background: #eee;
width: 550px;
position: relative;
z-index: 1;
}HTML:
<div id="wrap"><div id="left">
<p>left content.....</p>
<p>left content.....</p>
<p>left content.....</p>
</div><div id="right">
<p>right content to slide under left</p>
<p>right content to slide under left</p>
</div></div>
not sure if that's going to fit with what you want to do, let us know
Suzy
Why doesn't "float: right;" (which is what I'd been trying), work like this?
Well truth be told, you can do it with a mixture of floats and position relative to control the z-index too, but guess which browser doesn't play along ;) - see below for code sample
anyway simple explanation is because when you float 'A' right then it still affects 'B' - 'B' will reduce it's text line size but not its actual width to accommodate the float so as you narrow the window 'B' is just going to keep narrowing until it can't anymore (line size or specified width) then it drops below
- whereas when you Absolutely Position 'A' (glue it to the right) it's not affecting the left 'B' at all, 'B' doesn't even know it's there ;) - 'A' is removed from the document flow and would actually sit on top of the left side unless you control the stacking contexts, which is what adding a higher z-index to 'B' is doing.
z-index (stacking levels) can only be applied to elements which have position: relative or position: absolute.
btw, you don't need to use the values for top and right that I've used you can can set them to 0 or position to suit, these aren't really margins as explained above they're not affecting the distance from the left column at all - they measure from the top/right of the #wrap div (containing block)
and lastly just for info here's the CSS that might do it for the float, still using my HTML sample above, though in this case the right div must appear before the left in the source (whereas with the AP method it can be in any order)
CSS:
#wrap {
position: relative;
width: 80%;
margin: 0 auto;
border: 1px solid #f00;
min-width: 550px;
}#right {
float: right;
width: 200px;
background: #ff0;
position: relative;
z-index: 1;*margin-left: -550px;
*left: 350px;}
#left {
background: #eee;
width: 550px;
position: relative;
z-index: 2;
}p {margin: 1em 0;}
the bits in red are for IE only, it's is hack but is done like this for demo only.. it depends on your application but I'd say the AP method is more stable and more reliably positioned
Suzy
