CODEWITHSUNDEEP
css
Sean Kimball
Sean Kimball

Reputation: 4494

Variable width DIV using pixel minimum and maximum widths?

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.

When someone resizes their browser I need that div to expand or contract depending on the viewport size.

Any thoughts on how I can do this [is this possible without javascript?]?

UPDATE

This is where I got to - seems to work well in most browsers until I hit IE7.. 

    <div id="viewport" class="[[*layout]]">

<div id="contentwrapper">

        <div class="wrapper logo">

            <div id="header">
                [[$TopNav]]
            </div>

            <div id="content" class="homepage">
                [[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
            </div>

        </div>

</div>

<div class="wrapper footer">

    <div id="footer">

        <div id="footnav">[[$FootNav]]</div>

        <div id="copyright">[[$Copyright]]</div>

        <div id="news-feed">[[$NewsFeed]]</div>

    </div>  

</div>


    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;}

Upvotes: 1

Views: 6894

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

For a no-js solution on modern browser you can use CSS media queries like so

@media screen and (max-width: 1199px) {
   div { width: 900px; }
}

@media screen and (min-width: 1200px) {
   div { width: 1200px; }
}

this will automatically resize the div depending on your window width and not on the content. Media queries support: http://caniuse.com/css-mediaqueries

a simple proof-of-concept demo

<html>
    <head>
        <style>
        div { margin: 0 auto; border: 1px red solid }
        div:after { display: block; }

        @media screen and (max-width: 1199px) {
           div { width: 900px; }
           div:after { content: " max-width is 1199px" }
        }

        @media screen and (min-width: 1200px) {
           div { width: 1200px; }
           div:after { content: " min-width is 1200px" }
        }
    </style>
    </head>

    <body>
        <div>Resize your browser</div>
    </body>
</html>

Upvotes: 2

leopic
leopic

Reputation: 3012

CSS has 2 properties for those scenarios, that work from IE7+ called:

That's probably what you are looking for, you could set the width to 100% first then add the min/max width to control it.

Upvotes: 4

Related Questions