Databases
StackOverflow2013
Postsdbo
POHow to center wrapper with floating content
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to center wrapper with floating content
    primarykey
    data
    text
    <p>I have a wrapper wrapping number of large 300 by 300 divs. when the browser is in full screen the wrapper sits in the center. But when I resize the browser the content flows to second the line, but the wrapper takes 100% of the window. For example the browser window width is 800px the content is 4 blocks 300px by 300px so two blocks together takes only 600px and the other two are in the second line. My problem is that wrapper stretches to 800px and the content sits to the left of the screen and i want it in the center (when I use float: left) When I try the same using display: inline-block and text-align: centre, I can have the content centred in the screen even though the wrapper stretches to 100% of the width. Problem no1. with this solution is that is that if only one block is in the last row than it is centred right in the middle the second problem is mobile browser counts font-size: 0 somehow differently so it is a little misaligned. </p> <p>simplified <a href="http://jsfiddle.net/mamasum/b532A/1/" rel="nofollow">fiddle</a> you can see that if the window is small the third orange box falls to second line but is centred. When I use text-align: left than all boxes are against left side leaving significant space on right.</p> <p>here is the relevant CSS I have on site:</p> <pre><code>#site-wrapper { min-height:100%; text-align: center; position:relative; } #container { position:relative; width: auto; margin: 0 auto; display: inline-block; padding-bottom:40px; /* Height of the footer */ } div#content-wrapper{ padding:5px 0 5px 0; font-size: 0; text-align: center; margin-left: auto; } #column1, #column2, #column3 { margin-right: 5px; } #column-last{ margin-right: 5px; } div.column { //float: left; display: inline-block; vertical-align: top; font-size: 0; } .item { background: #0072C6; width: 20em; padding: 5px; height: auto; margin: 0 0 5px 0; font-size: 14px; color: #FFF; box-shadow: inset 0 0 100px #1082D6; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMamadum
    1. USMamadum
    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. This table or related slice is empty.
    1. COPlease post also some html, will be much easier to test it that this lone css.
      singulars
      1. POHow to center wrapper with floating content
      1. USStano
    2. COcan you please show us a live demo? this is quiet hard to regenerate a scenario and get the correct problem. Thanks.
      singulars
      1. POHow to center wrapper with floating content
      1. USmaksbd19
    3. COYeah, I added simple fiddle in the question.
      singulars
      1. POHow to center wrapper with floating content
      1. USMamadum
 

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