Databases
StackOverflow2013
Postsdbo
POVariable width DIV using pixel minimum and maximum widths?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVariable width DIV using pixel minimum and maximum widths?
    text
    copied!<p>Kinda stuck on a small issue trying to use a div with a background image in the top left [a logo] not sure how to get this done.... since the variable width is not dependent on a percentage width... i.e.</p> <ul> <li>the maximum width of the div is 1200px</li> <li>the minimum width of the div is 900px </li> </ul> <p>When someone resizes their browser I need that div to expand or contract depending on the viewport size. </p> <p>Any thoughts on how I can do this [is this possible without javascript?]?</p> <p><strong>UPDATE</strong></p> <p>This is where I got to - seems to work well in most browsers until I hit IE7.. </p> <pre><code> &lt;div id="viewport" class="[[*layout]]"&gt; &lt;div id="contentwrapper"&gt; &lt;div class="wrapper logo"&gt; &lt;div id="header"&gt; [[$TopNav]] &lt;/div&gt; &lt;div id="content" class="homepage"&gt; [[!If? &amp;subject=`[[*id]]` &amp;operator=`==` &amp;operand=`1` &amp;then=`[[$HomePageTpl]]` &amp;else=`[[$DefaultPageTpl]]` ]] &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="wrapper footer"&gt; &lt;div id="footer"&gt; &lt;div id="footnav"&gt;[[$FootNav]]&lt;/div&gt; &lt;div id="copyright"&gt;[[$Copyright]]&lt;/div&gt; &lt;div id="news-feed"&gt;[[$NewsFeed]]&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <pre><code> div {border: 1px dotted #ccc;} div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;} div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;} div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;} div#header {} .wrapper { margin:0 auto; height:150px; width:100%; max-width:1110px; min-width:1060px; text-align:left; } .wrapper.logo { background:transparent url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top; } div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;} </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