Databases
StackOverflow2013
Postsdbo
POPlacing two divs next two each other (inside another div)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPlacing two divs next two each other (inside another div)
    text
    copied!<p>so I'm basically tying to have everything for this site contained in one div. This is a success. My menu bar is in its on div inside of the main one. Through some rearranging of code and modifying of CSS, I have got my image gallery div to be in the right place. However, is this effective on other resolutions? Is there an easier way to get my gallery to show up next to my menu bar? A live demo of the site can be found at <a href="http://accessorizewithstyle.tk" rel="nofollow">accessorizewithstyle.tk</a>. Any help would be appreciated. I'm trying to make this site scale dynamically so that it looks good no matter which browser/resolution is viewing it.</p> <p>Code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Accessorize With Style | Index&lt;/title&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { // create the image rotator setInterval("rotateImages()", 2000); }); function rotateImages() { var oCurPhoto = $('#gallery div.current'); var oNxtPhoto = oCurPhoto.next(); if (oNxtPhoto.length == 0) oNxtPhoto = $('#gallery div:first'); oCurPhoto.removeClass('current').addClass('previous'); oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000, function() { oCurPhoto.removeClass('previous'); }); } &lt;/script&gt; &lt;style type="text/css"&gt; body { overflow:hidden; } img.background { position:absolute; top:0; left:0; width: 100%; z-index:-3; } img.background { width:auto\9; max-width:100%; } .menu{ margin:0; padding:0; width:300px; list-style:none; background:rgb(255,255,255); } .menu li{ padding:0; margin:0 0 1px 0; height:40px; display:block; } .menu li a{ text-align:left; height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('images/verMenuImages.png') 0px 0px no-repeat; text-decoration:none; } .menu li a:hover{ background:url('images/verMenuImages.png') 0px -40px no-repeat; color:rgb(0,0,0); } .menu li a.active, .menu li a.active:hover{ background:url('images/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255); } .menu li a span{ line-height:40px; } #site { width:85%; margin:0 auto; } #menubar { position: relative; left: 0px; } #gallery { position: absolute; left: 35%; height:400px; width:400px; } #gallery div { position:absolute; z-index: 0; } #gallery div.previous { z-index: 1; } #gallery div.current { z-index: 2; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="images/background.jpg" class="background" /&gt; &lt;div id="site"&gt; &lt;P&gt;&lt;center&gt;&lt;img src="images/logo.png" class="logo" /&gt;&lt;/center&gt;&lt;/P&gt; &lt;div id="menubar"&gt; &lt;div id="gallery" align="center"&gt; &lt;div class="current"&gt; &lt;img src="http://i.istockimg.com/file_thumbview_approve/1459298/2/stock-photo-1459298-jewllery-2.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="http://i.istockimg.com/file_thumbview_approve/3480966/2/stock-photo-3480966-bracelet.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="http://i.istockimg.com/file_thumbview_approve/14879331/2/stock-photo-14879331-earrings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="http://i.istockimg.com/file_thumbview_approve/2741073/2/stock-photo-2741073-wedding-rings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="http://i.istockimg.com/file_thumbview_approve/15490304/2/stock-photo-15490304-scarf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="index.html" class="active"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.html"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="necklaces.html"&gt;&lt;span&gt;Necklaces&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="bracelets.html"&gt;&lt;span&gt;Bracelets&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="earings.html"&gt;&lt;span&gt;Earings&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="rings.html"&gt;&lt;span&gt;Rings&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="scarves.html"&gt;&lt;span&gt;Scarves&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&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