Databases
StackOverflow2013
Postsdbo
POUnable to completely shrink wrap and center an element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnable to completely shrink wrap and center an element
    primarykey
    data
    text
    <p>I am using the following code to create a shrink wrapped and centered page. Everything is fine if the browser window is wider than the maximum potential width. In this case, there are three floated paragraphs with fixed widths. If the window is wide enough so that they can all float on the same line, the div is centered and wrapped correctly. But when the browser is narrower, and one of the paragraphs wraps to the next line, the div expands to the full width of the window and is no longer shrink wrapped. I have tried everything I can think of and am going to give up and move on unless someone has a new idea. Oddly, it works well in ie7. Go figure.</p> <pre><code>&lt;!doctype html&gt; &lt;head&gt; &lt;style type="text/css"&gt; header, footer, nav, section, article { display: block; } body { font-size:1em; margin:0; padding:0; font-family: Verdana, Arial, Helvetica, Sans-Serif; color:#000; background:#ddd url(images/BG.jpg); } /*********** Start shrink wrapped and centered layout styles ************************/ #page { position:relative; overflow:hidden; } #container { float:left; position:relative; left:50%; } #content { float:left; position:relative; right:50%; } /*********** End shrink wrapped and centered layout styles ************************/ #content { border:solid 4px #bbb; } p { width:20em; background-color:red; float:left; } &lt;/style&gt; &lt;body&gt; &lt;div id="page"&gt; &lt;div id="container"&gt; &lt;div id="content"&gt; &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;p&gt;p3&lt;/p&gt; &lt;/div&gt; &lt;/div&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. This table or related slice is empty.
    1. USRob
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUnable to completely shrink wrap and center an element
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POUnable to completely shrink wrap and center an element
      1. USbookcasey
      1. VTFavorite
    3. VO
      singulars
      1. POUnable to completely shrink wrap and center an element
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou could try using `diplay: inline-block` instead of `float` - however this would not work in IE7: http://jsfiddle.net/j6NuE/
      singulars
      1. POUnable to completely shrink wrap and center an element
      1. USMy Head Hurts
    2. COWhen I use inline-block, I get the same behavior. The problem I am having is when the browser width forces the floating paragraphs to wrap. The containing div isn't shrunk any more. I want it to continue to shrink down as the paragraphs wrap. In this case it would shrink when the first one wrapped, and then shrink again when the next one wrapped. So there would be three possible widths for the containing div (60em, 40em or 20em), depending on the width of the browser window.
      singulars
      1. POUnable to completely shrink wrap and center an element
      1. USRob
 

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