Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You have a design that is 1360 px wide and several of your images are 1360 px wide, or combinations of them are 1360 px wide this is OK if your target audience can support that but generally there are going to be some users for which this is going to be too wide.</p> <p>You use float left for all your images and combinations of images. Typically when they are combined on a line some are going to start to drop onto the next line when your display width get below the total combined width that they would take up.</p> <p>I've stripped out all your script and replaced the images with a solid background colour because I don't have any of your images. </p> <p>But this works and does not move about and should give you a place to start from, for putting back your elements.</p> <pre><code>&lt;body&gt; &lt;div class="images"&gt; &lt;div class="row row1 full"&gt; &lt;div id="home1"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row narrow-strip"&gt; &lt;div id="home2"&gt;&lt;/div&gt; &lt;div id="home3"&gt;&lt;/div&gt; &lt;div id="home4"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row row3 full"&gt; &lt;div id="home5"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row narrow-strip"&gt; &lt;div id="home6"&gt;&lt;/div&gt; &lt;div id="home7"&gt;&lt;/div&gt; &lt;div id="home8"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row row5 full"&gt; &lt;div id="home9"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row narrow-strip"&gt; &lt;div id="home10"&gt;&lt;/div&gt; &lt;div id="home11"&gt;&lt;/div&gt; &lt;div id="home12"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row row7 full"&gt; &lt;div id="home13"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>and then you can clean out a lot of repetition from your CSS like this:</p> <pre><code>.images { margin: auto auto; width: 1360; } .images div { padding:0; margin:0; } .images .row { width:1360px; } .images .row div { float:left; display:inline-block; height:100%; } .images .row.full div { width:100%; } .images .row.narrow-strip { height:63px; } .images .row1 { height:420px; } .images .row3 { height:492px; } .images .row5 { height:1549px; } .images .row7 { height:128px; } #home1 { background-color:#EEE; height: 420px; } #home2 { background-color:#DDD; width: 548px; } #home3 { background-color:#CCC; width: 262px; } #home4 { background-color:#BBB; width: 550px; } #home5 { background-color:#AAA; height: 492px; } #home6 { background-color:#999; width:560px; } #home7 { background-color:#888; width:202px; } #home8 { background-color:#777; width:598px; } #home9 { background-color:#666; height: 1549px; } #home10 { background-color:#777; width:860px; } #home11 { background-color:#444; width:262px; } #home12 { background-color:#333; width:238px; } #home13 { background-color:#222; height: 128px; } </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