Databases
StackOverflow2013
Postsdbo
POAdd div outside bootstrap grid
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd div outside bootstrap grid
    text
    copied!<p>I try to use bootstrap twitter to format my site. When I add my several divs into the row-column format. I ve got a 9x9 grid with divs. I want to put one more element outside the grid in a fixed position. I use row-fluid and span class for my elments. How can i place my last element fully right of my page ??</p> <p>My Code: </p> <pre><code> &lt;body onload='drawAll();'&gt; &lt;section&gt; &lt;div class="container-fluid"&gt; &lt;div class="row-fluid"&gt; &lt;div id="mapWidget" class="debug span8"&gt; &lt;canvas id="map" width="500" height="280" &gt;&lt;/canvas&gt; &lt;canvas id="layer" width="500" height="280" style= "position:absolute; left:0px; top:0px;"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row-fluid"&gt; &lt;div id="profiles" class = "span4"&gt; &lt;script id="profileTemplate" type="text/template"&gt; &lt;div class= "hashTags" id = 'redLine'&gt; &lt;h1&gt; &lt;img src="images/tagIcon.png"/&gt; HASHTAGS&lt;/h1&gt; &lt;br&gt;&lt;font size = "6"&gt;&lt;%= tagsCloud.tags[0] %&gt; &lt;/font&gt; &lt;%= tagsCloud.tags[1] %&gt; &lt;%= tagsCloud.tags[2] %&gt; &lt;%= tagsCloud.tags[3] %&gt; &lt;font size = "5"&gt;&lt;%=tagsCloud.tags[4] %&gt; &lt;/font&gt; &lt;%= tagsCloud.tags[5] %&gt; &lt;%= tagsCloud.tags[6] %&gt; &lt;%= tagsCloud.tags[7] %&gt;&lt;/br&gt; &lt;br&gt; &lt;%= tagsCloud.tags[8] %&gt; &lt;%= tagsCloud.tags[9] %&gt; &lt;%= tagsCloud.tags[10] %&gt; &lt;font size = "6"&gt;&lt;%= tagsCloud.tags[11] %&gt; &lt;/font&gt; &lt;%= tagsCloud.tags[12] %&gt; &lt;%= tagsCloud.tags[13] %&gt; &lt;%= tagsCloud.tags[14] %&gt; &lt;%= tagsCloud.tags[15] %&gt;&lt;/br&gt; &lt;br&gt;&lt;font size = "6"&gt;&lt;%= tagsCloud.tags[0] %&gt; &lt;/font&gt; &lt;%= tagsCloud.tags[1] %&gt; &lt;%= tagsCloud.tags[2] %&gt; &lt;%= tagsCloud.tags[3] %&gt; &lt;font size = "5"&gt;&lt;%= tagsCloud.tags[4] %&gt; &lt;/font&gt; &lt;%= tagsCloud.tags[5] %&gt; &lt;%= tagsCloud.tags[6] %&gt; &lt;%= tagsCloud.tags[7] %&gt;&lt;/br&gt; &lt;/div&gt; &lt;/script&gt; &lt;/div&gt; &lt;div class = 'usersCloud debug span2'&gt; &lt;h2 &gt;&lt;img src="images/chat.png"/&gt;TOP COMMENTERS&lt;/h2&gt; &lt;img src="images/userCloud.png" /&gt; &lt;/div&gt; &lt;div class = ' button span2'&gt; &lt;img src="images/menu.png"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row-fluid"&gt; &lt;/div&gt; &lt;div class="row-fluid"&gt; &lt;div id="footer" class="debug span4"&gt;&lt;img src="images/logo.png"/&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p> </p> <p>My very special element is the element with menu png image, when i put it outside the grid, it has unexpected behavior! Css code:</p> <pre><code>.button{ padding: 10px 10px 10px 10px; display:inline-block; width: 24px; right:-80px;top:0px; position:fixed; } </code></pre>
 

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