Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The placeholder <code>div</code> would only work if you had a static <code>height</code> on the <code>.bonus-box</code> container that could also be set on the placeholder. Since you say you need it to automatically increase and decrease its size based on content, this won't work since the placeholder <code>div</code> does not know the dynamic size of your <code>.bonus-box</code> (unless you were to use JavaScript, but this can definitely be handled in a pure CSS way).</p> <hr> <p>Now, the easiest solution would be to set <code>.bonus-box</code> and <code>.placeholder-div</code> to the same height and be done with it. You would also need to put the <code>&lt;div class="placeholder-div"&gt;&lt;/div&gt;</code> after the <code>.bonus-box</code> <code>div</code>; otherwise, the bonus box will show up under the placeholder <code>div</code> since that is where its last-known static position in the page flow was.</p> <p><a href="http://jsfiddle.net/CwHpE/" rel="nofollow">JSFiddle example here.</a></p> <p>Doing it this way, you would need to modify both <code>height</code> properties to contain the content snugly whenever text was added to or removed from the bonus box <code>div</code>.</p> <hr> <p>But if you'd like to do it the more-complex but easier-to-maintain way, what you'd probably want to do is structure it so that a parent container held a <code>min-width</code> of <code>1190px</code>. The direct children of this container then would all specify their <code>width</code> to be <code>1190px</code>. However, the bonus box (now moved to be one of these direct children) would set its <code>width</code> to be <code>100%</code>.</p> <p>HTML:</p> <pre><code>&lt;div id="wrapper-main"&gt; &lt;div class="content-main"&gt; &lt;p&gt;Sed ut est augue. Etiam ullamcorper, leo a tincidunt commodo, felis justo posuere diam, non tempus libero purus a mauris. Integer suscipit et lectus sollicitudin convallis. Nullam mattis lorem a dui mattis, vel molestie justo mollis. Duis leo felis, cursus vitae ornare condimentum, sagittis non odio. Cras pulvinar ultrices ante, id tincidunt sem volutpat quis. Curabitur mollis ultricies nunc nec aliquam. Aliquam eleifend laoreet lacus, sit amet viverra lorem.&lt;/p&gt; &lt;/div&gt; &lt;div class="wrapper-bonus"&gt; &lt;div class="content-main"&gt; &lt;p&gt;Cras euismod tristique nibh non semper. Sed iaculis mi sit amet aliquam ultricies. Donec eros eros, auctor et sem vitae, fringilla condimentum nisi. Donec volutpat mauris sit amet convallis accumsan. Nam nec porttitor nulla, placerat suscipit leo. Nam tincidunt, urna a sagittis pulvinar, libero metus iaculis justo, quis fermentum dolor magna vel dui. Vestibulum consectetur mattis neque, at lacinia augue convallis nec. Fusce orci mi, auctor pretium gravida sit amet, feugiat et purus.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="content-main"&gt; &lt;p&gt;Vivamus mollis quis lacus sed auctor. Integer ornare venenatis ultrices. Cras faucibus orci tincidunt enim sollicitudin ornare. Pellentesque dapibus iaculis ante, non imperdiet eros varius venenatis. Nulla facilisi. Cras iaculis tincidunt eros quis aliquam. Etiam mattis leo leo, ut varius tellus gravida non. Aenean id urna hendrerit, gravida leo sed, molestie nibh. Proin accumsan ultricies nulla, adipiscing ultricies urna posuere in. Vestibulum id eros leo. Etiam erat metus, vulputate sit amet lorem sed, adipiscing tempus enim. Nulla et massa sit amet nibh pharetra auctor. Curabitur odio odio, gravida eget nulla sit amet, placerat porta mi.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#wrapper-main { min-width: 1190px; } .content-main { margin: 0 auto; width: 1190px; } .wrapper-bonus { width: 100%; background-color: #f80; } </code></pre> <p><a href="http://jsfiddle.net/zs3fY/" rel="nofollow">JSFiddle here.</a></p> <p>Of course, doing it this way would require a little bit of restructuring in your code... which may or may not be possible for whatever reason.</p>
    singulars
    1. This table or related slice is empty.
    1. POMake Child div inside a certain-width parent div have full browser window width
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USSombreErmine
    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. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI want to center the divs using margin: auto on the parent div. I dont think min-width lets you do that. Thanks for explaining the placeholder div though.
      singulars
      1. PO
      1. USAlex Zahir
 

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