Posted by Jim Moe on 05/05/06 21:43

vito wrote:
>
> After adopting the following style, i somehow achieve the effect of
> separating left & right blocks. however, i find when a browser window is
> rescaled to a smaller size, the right one will shift towards the bottom of
> the left part. is that the keyword "float" producing the result? how can i
> "fix" the right block? thanks.
>
> #nav { float:left; width:240px; }
> #main { float:right; width:500px; }
>
Yes, that is how floated elements work, a bit like inline elements.
Think about how words or images behave when there are two or more in a line.
There are a couple of ways to avoid the wrap:
- Set the widths to a percentage, or at least #main. The column(s) then
adjust to fit the available space (aka: fluid, liquid).
- Wrap the two columns in a div and set that div's width to a value
greater than the sum of the two elements' width + padding + margins +
borders (aka: fixed width, rigid).

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Back to original message]