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

Popular posts from this blog

python - Scipy curvefit RuntimeError:Optimal parameters not found: Number of calls to function has reached maxfev = 1000 -

c# - How to add a new treeview at the selected node? -

java - netbeans "Please wait - classpath scanning in progress..." -