Databases
StackOverflow2013
Postsdbo
POCSS margins acting strange
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS margins acting strange
    primarykey
    data
    text
    <p>So I'm found an article on responsive design <a href="http://learn.shayhowe.com/advanced-html-css/responsive-web-design" rel="nofollow">(here)</a> and I tried to make something like what it had on part of the tutorial. The site said to divid the size of the element by the size of the container that the element(s) are in. (the reason I divided by 1000 and not 1050 is because the margins on the div#main make it 1000px even though the header is 1050px) If that doesn't make sense than the link can explain it. It looks fine with my browser at full size, but if I shrink the window to much then it doesn't resize the way it should. I'm not exactly sure what part of my code is wrong but if someone could help me that would be great! <a href="http://addisonbean.com/responsive.html" rel="nofollow">Here's</a> a link to the page I made. And here is my source code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body, html { margin: 0; height: 100%; width: 100%; } header { height: 100px; max-width: 1050px; margin: 0 auto; } #main { border-radius: 25px; background-color: #aaa; height: inherit; max-width: inherit; margin: 25px; } .box { width: 47.5%; height: 75%; margin: 1.25%; background-color: #444; border-radius: 15px; float: left; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;div id="main"&gt; &lt;span class="box"&gt; &lt;/span&gt; &lt;span class="box"&gt; &lt;/span&gt; &lt;/div&gt; &lt;/header&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAddison
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS margins acting strange
      1. USsalasks
      1. VTFavorite
    1. COIn which browser are you trying ? I tried your sample page from Chrome, it works perfectly fine and couldn't see any problem :(
      singulars
      1. POCSS margins acting strange
      1. USVinod Jayachandran
    2. COI'm using Chrome beta, although I don't think the the beta would matter. Did you try resizing it? It looks fine for me too until it gets a certain size.
      singulars
      1. POCSS margins acting strange
      1. USAddison
    3. COAny specific reason you opted for SPAN ( for class="box") , can you try replacing that too with DIV as anyways you have float:right . I faced a similar problem in the past
      singulars
      1. POCSS margins acting strange
      1. USVinod Jayachandran
 

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