Databases
StackOverflow2013
Postsdbo
PODiv centering issue. More complicated then I thought
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv centering issue. More complicated then I thought
    text
    copied!<p>The fiddle is contained <a href="http://jsfiddle.net/thematejka/abnGa/1/" rel="nofollow">here</a></p> <p>Code below is a sample of the relevant code, everything is in the fiddle.</p> <p>HTML</p> <pre><code>&lt;body&gt; &lt;div id="wrapper" &gt; &lt;header&gt; &lt;div class="hwrapper"&gt; &lt;div class="box effect2"&gt; &lt;img src="media/header1.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt; &lt;/div&gt; &lt;div class="box effect2"&gt; &lt;img src="media/header2.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt; &lt;/div&gt; &lt;div class="box effect2"&gt; &lt;img src="media/header3.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt; &lt;/div&gt; &lt;div class="box effect2"&gt; &lt;img src="media/header4.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt; &lt;/div&gt; &lt;div class="box effect2"&gt; &lt;img src="media/header5.jpg" width="150px" height="150px" style="padding-top:5px;" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; </code></pre> <p>CSS</p> <pre><code> body { text-align: center; margin:0; padding:0; background-image:url('../media/background.gif'); background-repeat: repeat; } #wrapper { } header { width:100%; height:300px; -webkit-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4); -moz-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4); box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4); } /*---------header images--------*/ .hwrapper { } .box { width:160px; height:160px; background:#FFF; margin-top:20px; margin-bottom:20px; margin-left:20px; margin-right:20px; float: left; } .effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 14px; left: 5px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); } .effect2:after { -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); right: 5px; left: auto; } </code></pre> <p>Okay, so I made a nice row of pictures to run along the top of my page with a neat page curl effect. The problem is that it won't center with the rest of my content so far. It stays to the left, which is due to the float:left css rule in .box.</p> <p>If I take away float:left, the row of pictures turns into a column running down the page, instead of a nice horizontal row.</p> <p>I have an .hwrapper div class around my row of pictures to set rules to center everything while keeping the float:left in .box, but none of my middle-aligning tricks are working. I'm not sure where the conflict is, perhaps in my page curl css?</p> <p>thanks in advance.</p>
 

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