I'm trying to figure out how to get something like the effect at <!-- m --><a class="postlink" href="http://www.odeo.com">http://www.odeo.com</a><!-- m --> , how they get the search, browse etc. on the right side and the other stuff like featured channels etc. on the left side, they are both in seperate divs, and one is floated, however when I try float:right; for a div to try to get it like this it remains below the other one. as in the coding there divs are like so:
<Left side div>
code
.
.
</div>
<Right side div>
code
.
.
</div>
So how do they get the one on the right to the top of the page also and inside the overall containing div? Thanks for any help.By using floats. (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/">http://css.maxdesign.com.au/floatutorial/</a><!-- m -->)The most basic approach you probably want to use is "opposing floats"
It's basically like this:
<wrapper div>
<one column>
</one column>
<other column>
</other column>
</wrapper div>
In the styles, you float the columns left and right, although the order doesn't matter. You give each a margin in from the side that it's floated against, and then "display:inline" it to kill an IE bug. Then use easyclearing (<!-- m --><a class="postlink" href="http://positioniseverything.net/easyclearing">http://positioniseverything.net/easyclearing</a><!-- m -->) on the wrapper.
A fairly basic example is this page of mine: <!-- m --><a class="postlink" href="http://newtron.uwmike.com/">http://newtron.uwmike.com/</a><!-- m -->
Styles: <!-- m --><a class="postlink" href="http://newtron.uwmike.com/style.css">http://newtron.uwmike.com/style.css</a><!-- m -->
There, #main is the wrapper, and the two columns are #content and #sidebar.
But you can see that if I wanted to switch them left for right, all I'd have to do is swap the floats and margins on the two columns.
<Left side div>
code
.
.
</div>
<Right side div>
code
.
.
</div>
So how do they get the one on the right to the top of the page also and inside the overall containing div? Thanks for any help.By using floats. (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/">http://css.maxdesign.com.au/floatutorial/</a><!-- m -->)The most basic approach you probably want to use is "opposing floats"
It's basically like this:
<wrapper div>
<one column>
</one column>
<other column>
</other column>
</wrapper div>
In the styles, you float the columns left and right, although the order doesn't matter. You give each a margin in from the side that it's floated against, and then "display:inline" it to kill an IE bug. Then use easyclearing (<!-- m --><a class="postlink" href="http://positioniseverything.net/easyclearing">http://positioniseverything.net/easyclearing</a><!-- m -->) on the wrapper.
A fairly basic example is this page of mine: <!-- m --><a class="postlink" href="http://newtron.uwmike.com/">http://newtron.uwmike.com/</a><!-- m -->
Styles: <!-- m --><a class="postlink" href="http://newtron.uwmike.com/style.css">http://newtron.uwmike.com/style.css</a><!-- m -->
There, #main is the wrapper, and the two columns are #content and #sidebar.
But you can see that if I wanted to switch them left for right, all I'd have to do is swap the floats and margins on the two columns.