css - Float inside an absolute div inside a relative inline-block div -


hope can give me hand this, i've searched can't find same problem.

i'm re-jigging menu website , need these .float-columns appear next each other, in set-up appear under each other.

.main{  	display: inline-block;  	position:relative;}    .content {      position: absolute;  }  .float-column  {  	background: #fff000;      float:left;  }
<div class="main">  <div class="content">  <div class="float-column">column 1</div>  <div class="float-column">column 2</div>  </div>  </div>

i can make them appear expected removing position .content or removing position/display .main, unfortunately can't breaks rest of menu.

i've had limited success when specifying fixed widths .float-column , .content, ideally i'd leave flexible (so can add many columns needed)

is there way around this? missing obvious?

cheers!

jsfiddle

as per requirement, need remove inline block main class. make columns align side side.


Comments

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

javascript - oscilloscope of speaker input stops rendering after a few seconds -