css float - Css positioning columns -
i'm trying make simple css framework allows me switch layouts sidebar-content, sidebar-sidebar-content etc.. problem i'm facing sidebar-content-sidebar layout. html code looks like
<div class="content"> <h2>content</h2> </div> <div class="sidebar-alt"> <h2>sidebar-alt</h2> </div> <div class="sidebar"> <h2>sidebar</h2> </div>
i've tried using floats can't seem content div in centre of 2 sidebars.
using bit of css able achieve it
body.sidebar-content-sidebar #container.width-960 .content { width: 460px; position: relative; left: 160px; top: 55px; } body.sidebar-content-sidebar #container.width-960 .sidebar { width: 300px; margin: 0 0 0 0; position: absolute; top: 55px; left: 639px; } body.sidebar-content-sidebar #container.width-960 .sidebar-alt { width: 140px; margin: 0 0 0 0; position: absolute; top: 55px; }
however navigation superfish doesn't work. there anyway of positioning columns using simple floats? or solution?
put content in "center" in html , float them left. don't worry setting top , left.
<div class="sidebar-alt"> <h2>sidebar-alt</h2> </div> <div class="content"> <h2>content</h2> </div> <div class="sidebar"> <h2>sidebar</h2> </div>
another way
<div class="left" style="float:left;"> <div class="sidebar-alt" style="float:left;"> <h2>sidebar-alt</h2> </div> <div class="content" style="float:right;"> <h2>content</h2> </div> </div> <div class="sidebar" style="float:right;"> <h2>sidebar</h2> </div>
make sure set width. here example http://ewsbuild.com/~johnsplu/
Comments
Post a Comment