Databases
StackOverflow2013
Postsdbo
PO100% width divs not spanning entire width of the browser in webkit
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO100% width divs not spanning entire width of the browser in webkit
    primarykey
    data
    text
    <p>I'm having a hard time with what I thought would be a dead simple issue. </p> <p>I'm trying to create a div that spans 100% of the width of a browser window. The div is filled with several child divs that expand to fill that entire space with alternating colors like a football field. These divs would expand to fit the full width of a given space that has individual 1% stripes that fill that space fully.</p> <p>This seems to work fine in Firefox, but in Safari (and Chrome) the calculation seems to be too strict, and leaves some extra leftover space on the right-most div.</p> <p>Is there any way to avoid this leftover space? I've encountered the same issue in Safari and Chrome even when placing it in a fixed width div... there is always space left over on the right. I wonder if I'm just asking it to do too much math?</p> <p>Here is the code I am using, with alternate versions dividing the space into divisions of 5% and divisions of 1%. Sorry, it's long and redundant code.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; &lt;!-- body { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .clearfix { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #field { width: 100%; background: #009900; height: 100px; margin: 0; margin-bottom: 25px; padding: 0; } .singleyard { width: 1%; float: left; margin: 0; padding: 0; background: #009900; } .fiveyards { width: 5%; float: left; margin: 0; padding: 0; } .alt { background: rgba(0,0,0,0.25); } .oneyard { width: 20%; float: left; margin: 0; padding: 0; } --&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="field"&gt; &lt;div class="fiveyards"&gt;5&lt;/div&gt; &lt;div class="fiveyards alt"&gt;10&lt;/div&gt; &lt;div class="fiveyards"&gt;15&lt;/div&gt; &lt;div class="fiveyards alt"&gt;20&lt;/div&gt; &lt;div class="fiveyards"&gt;25&lt;/div&gt; &lt;div class="fiveyards alt"&gt;30&lt;/div&gt; &lt;div class="fiveyards"&gt;35&lt;/div&gt; &lt;div class="fiveyards alt"&gt;40&lt;/div&gt; &lt;div class="fiveyards"&gt;45&lt;/div&gt; &lt;div class="fiveyards alt"&gt;50&lt;/div&gt; &lt;div class="fiveyards"&gt;55&lt;/div&gt; &lt;div class="fiveyards alt"&gt;60&lt;/div&gt; &lt;div class="fiveyards"&gt;65&lt;/div&gt; &lt;div class="fiveyards alt"&gt;70&lt;/div&gt; &lt;div class="fiveyards"&gt;75&lt;/div&gt; &lt;div class="fiveyards alt"&gt;80&lt;/div&gt; &lt;div class="fiveyards"&gt;85&lt;/div&gt; &lt;div class="fiveyards alt"&gt;90&lt;/div&gt; &lt;div class="fiveyards"&gt;95&lt;/div&gt; &lt;div class="fiveyards alt"&gt;100&lt;/div&gt; &lt;/div&gt; &lt;div id="field"&gt; &lt;!--below section is repeated 10 times --&gt; &lt;div class="singleyard"&gt;1&lt;/div&gt; &lt;div class="singleyard"&gt;2&lt;/div&gt; &lt;div class="singleyard"&gt;3&lt;/div&gt; &lt;div class="singleyard"&gt;4&lt;/div&gt; &lt;div class="singleyard"&gt;5&lt;/div&gt; &lt;div class="singleyard"&gt;6&lt;/div&gt; &lt;div class="singleyard"&gt;7&lt;/div&gt; &lt;div class="singleyard"&gt;8&lt;/div&gt; &lt;div class="singleyard"&gt;9&lt;/div&gt; &lt;div class="singleyard alt"&gt;10&lt;/div&gt; &lt;!--end repeated section--&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USZach Saucier
    1. USvaderules
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO100% width divs not spanning entire width of the browser in webkit
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO100% width divs not spanning entire width of the browser in webkit
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. PO100% width divs not spanning entire width of the browser in webkit
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwhy are all your css styles commented out btw?
      singulars
      1. PO100% width divs not spanning entire width of the browser in webkit
      1. USHailwood
    2. COHa. No idea why those comment tags were in there, but thanks for the catch. Unfortunately, removing them hasn't helped.
      singulars
      1. PO100% width divs not spanning entire width of the browser in webkit
      1. USvaderules
    3. COWhat is the final status of your development. Have you found an answer. I am facing similar issues.(refer: http://stackoverflow.com/questions/17089419/full-width-of-the-mobile-not-possible-phonegap-requirejs-jquery)
      singulars
      1. PO100% width divs not spanning entire width of the browser in webkit
      1. USuser1102171
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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