Databases
StackOverflow2013
Postsdbo
POinline-block on span
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POinline-block on span
    primarykey
    data
    text
    <p>I expected the two span tags in the following sample to display next to each other, instead they display one below the other. If I set the width of the class span.right to 49% they display next to each other. I am not able to figure out why the right span is pushed down like the right span has some invisible padding/margin which makes it take more than 50%. I am trying to get this done without using html tables. Any ideas?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Test Page&lt;/title&gt; &lt;style type='text/css'&gt; * { margin: 0; } html,body{ margin:0; padding:0; height:100%; width:100%; border:none; } div.header{ width:100%; height:80px; vertical-align:top; } span.left { height:80px; width:50%; display:inline-block; background-color:pink; } span.right { vertical-align:top; display:inline-block; text-align:right; height:80px; width:50%; background-color:red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class='header'&gt; &lt;span class='left'&gt;Left Span 50% width&lt;/span&gt; &lt;span class='right'&gt;Right Span 50% width&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p>Thanks for the explanation. The float:left works beautifully with expected results in FF 3.1. Unfortunately, in IE6 the right side span renders 50% of the 50%, in effect giving it a width of 25% of the browser window. Setting its width to 100% achieves the desired results but breaks in FF 3.1 which is in standards compliance mode and I understand that. Getting it to work both in FF and IE 6, without resorting to hacks or using multiple CSS sheets has been a challenge</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USErik Schierboom
    1. USrams
    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
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POinline-block on span
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POinline-block on span
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POinline-block on span
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy support IE6? http://www.ie6nomore.com/
      singulars
      1. POinline-block on span
      1. USjrummell
 

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