Databases
StackOverflow2013
Postsdbo
POFloat with %-width inside an absolute positioned div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFloat with %-width inside an absolute positioned div
    text
    copied!<p>I've done this before but not with bootstrap and I can't remember the solution last time either..</p> <p><strong>What I want</strong>: a responsive design using bootstrap where each column is given a width using percentage. </p> <p><strong>What the customer wants</strong>: nice transitions between pages where the old one slides out and the new slides in.</p> <p><strong>The solution</strong>: <code>$(".page").css("left", something)</code> and put on some transition properties using CSS3.</p> <p><strong>What is required for such a solution</strong>: only elements with absolute position can use top and left property.</p> <p><strong>The problem:</strong> The columns are no longer responsive now that they are hosted inside an absolute positioned div! :(</p> <pre><code>&lt;div id="pagewrapper"&gt; &lt;div class="container page"&gt; &lt;div class="row"&gt; &lt;div class="col-xs-6"&gt; &lt;p&gt;Bla bla bla bla bla bla&lt;/p&gt; &lt;/div&gt; &lt;div class="col-xs-6"&gt; &lt;p&gt;Bla bla bla bla bla bla&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; #pagewrapper { /* margin and padding because I have a fixed header and footer */ margin: 0 auto; padding: 60px 25px; position: relative; } .page { position: absolute; /* mixins for LESS I dont have here now .transition-duration(2s); .transition-property(left); */ } &lt;/style&gt; </code></pre> <p>Here is a <a href="http://jsfiddle.net/52VtD/979/" rel="nofollow">JSFIDDLE</a>. The <code>position: absolute</code> is commented out for now, ucomment it and you see the difference.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload