Databases
StackOverflow2013
Postsdbo
PODiv's can not be placed over each other
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv's can not be placed over each other
    text
    copied!<p>I think it is a little issue I overlooked, but I can use some help.</p> <p>In the code below (wich a part of it is mine) I try to place the "twitter" div above the "wrapper" div. I tried different things like the z-index, but without any success. Can someone help me place this two div's over each other? - Thanks</p> <p>code:</p> <pre><code>&lt;head&gt; &lt;title&gt;Proto Format, grafisch ontwerp &amp;amp; concept.&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;link href="Proto2.css" rel="stylesheet" type="text/css"&gt; &lt;style type="text/css"&gt; #twitter { height:auto; width:auto; z-index:100; margin-left:500px; margin-top:100px; } #wrapper{ margin-left: auto; margin-right:auto; z-index:auto; } #content{ margin-left:auto; margin-right:auto; height:800px; } &lt;/style&gt; &lt;/head&gt; &lt;body bgcolor="#BA830E" link="#006C8C" vlink="#006C8C" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"&gt; &lt;div id="content"&gt; &lt;div id="twitter"&gt; &lt;script src="http://widgets.twimg.com/j/2/widget.js"&gt;&lt;/script&gt; &lt;script&gt; new TWTR.Widget({ version: 2, type: 'profile', rpp: 1, interval: 30000, width: 250, height: 300, theme: { shell: { background: '#ffffff', color: '#666666' }, tweets: { background: '#', color: '#666666', links: '#006C8C' } }, features: { scrollbar: false, loop: false, live: false, behavior: 'all' } }).render().setUser('chantalheeg').start(); &lt;/script&gt; &lt;/div&gt; &lt;div id="wrapper"&gt; &lt;!-- ImageReady Slices (visie.psd) --&gt; &lt;table width="989" height="1012" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabel_01"&gt; &lt;tr&gt; &lt;td height="132" colspan="5" background="afbeeldingen/klein-2kolom_01.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td width="198" height="811" rowspan="5" background="afbeeldingen/klein-2kolom_02.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;img src="afbeeldingen/spacer.gif" width="1" height="132" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="235" height="366" rowspan="3"&gt;&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="235" height="366"&gt; &lt;param name="movie" value="afbeeldingen/menu-links/menulinks-visie.swf"&gt; &lt;param name="quality" value="high"&gt; &lt;embed src="afbeeldingen/menu-links/menulinks-visie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="235" height="366"&gt;&lt;/embed&gt; &lt;/object&gt;&lt;/td&gt; &lt;td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;img src="afbeeldingen/spacer.gif" width="1" height="117" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="69" colspan="4" background="afbeeldingen/klein-2kolom_05.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;img src="afbeeldingen/spacer.gif" width="1" height="69" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="12" height="493" rowspan="2" background="afbeeldingen/klein-2kolom_06.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td width="260" height="493" rowspan="2" align="left" valign="top" background="afbeeldingen/essentie6.gif"&gt; &lt;span class="titeltekst"&gt;&lt;br&gt;&lt;br&gt;Visie Proto Format&lt;/span&gt;&lt;span class="tekst"&gt;&lt;br&gt; &lt;br&gt; &lt;/span&gt; &lt;span class="tekst"&gt;Proto Format maakt in opdracht reclame en promotiemiddelen voor verschillende bedrijven en instanties. We zijn altijd op zoek naar de juiste manier om een bedrijf of product te promoten en ontwikkelen een werkwijze om hieraan vorm te geven. We houden niet van standaardwerk en spannen ons er dan ook altijd voor in om, veelal samen met de klant, tot iets te komen dat net even dat stukje extra geeft. &lt;br&gt; &lt;br&gt; &lt;/span&gt; &lt;/td&gt; &lt;td width="13" height="493" rowspan="2" background="afbeeldingen/essentie7.gif"&gt;&amp;nbsp; &lt;/td&gt; &lt;td width="270" height="493" rowspan="2" align="left" valign="top" background="afbeeldingen/essentie8.gif"&gt; &lt;span class="tekst"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;Wij vinden het niet belangrijk om ons eigen stempel ergens op te drukken. Het gaat erom dat de klant iets krijgt waar hij trots op is en wat natuurlijk aansluit bij de betreffende doelgroep. &lt;br&gt;In onze uitingen zorgen we er voor dat de boodschap zo helder mogelijk naar buiten wordt gebracht.&lt;br&gt; We houden niet van onnodige opschmuk. De essentie moet communiceren.&lt;br&gt;&lt;br&gt;&lt;/span&gt;&lt;/td&gt; &lt;td&gt; &lt;img src="afbeeldingen/spacer.gif" width="1" height="180" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="235" height="514" rowspan="2" background="afbeeldingen/klein-2kolom_10.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;img src="afbeeldingen/spacer.gif" width="1" height="313" alt=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="201" colspan="5" background="afbeeldingen/klein-2kolom_11.gif"&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;img src="afbeeldingen/spacer.gif" width="1" height="201" alt=""&gt;&lt;/td&gt; &lt;span class="twitter"&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;&lt;/div&gt; &lt;!-- End ImageReady Slices --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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