CODEWITHSUNDEEP
htmlcss
Stefan
Stefan

Reputation: 14863

HTML fullscreenlayout with min-width, max-width

I have a item (e.g. a div tag, which takes 1/3 of the screen-width and has a minimum width of 500px and a maximum width of 700px. Beside it, there is another item which takes the rest of the screen. If I just assign a width of 66% it works fine as long as the height of the other item does not take one of the max values, at which point an overflow happens or the item just lets space out.

Any ideas who this is done by html without building an overly complex javaScript script?

best Regards, Stefan

Edit Code: This sould provide a simple example, As long as the site is under 500px, both are 50% of the screen, but if it gets larger, the right side (marked with world) should fill out more than 50%.

<html>
<head>
    <style type="text/css">
        * {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 99%;
            width: 99%;
        }

        table {
            table-layout: auto;
        }
        .minfield {
            max-width: 250px;
            border: 1px solid red;
            overflow: hidden;
        }

        .leftfloat{
            float: left;
        }

        .maxsize{
            height: 99%;
            width: 49%;
        }
    </style>    
</head>

<body>
    <div class="fullheight">
        <div class="leftfloat minfield maxsize">
            <p>hello</p>
        </div>
        <div class="leftfloat maxsize">
            <p>world</p>
        </div>
    </div>
</body>

Demo|FullScreen

Upvotes: 1

Views: 2538

Answers (1)

Rafael Herscovici
Rafael Herscovici

Reputation: 17104

possible duplicate : Make a div fill the remaining screen space

and another: How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

EDIT: Look what i did using one of the solutions i provided earlier:

<html>  
    <body>     
        <div class="fullHeight">             
            <div class="minField maxSize"><p>hello</p></div>             
            <div class="maxField maxSize"><p>World</p></div>     
        </div> 
    </body>  
</html>

* {             
    border: 1px solid black;         
} 
html,body,.fullHeight {             
    height: 99%;             
    width: 99%;         
} 

.maxSize{             
    height: 99%;                  
} 
.minField{                     
    float:left;
    width:250px; /* This is a must so you could define min/max */  
    max-width:250px;
    width: expression(this.width > 250 ? 250: true); /* IE Hack for max-width */

    background-color:#ff0000;             
}             
.maxField {                     
    margin-left: 250px;        
    background-color:#00FF00;             
}

jsFiddler Code | jsFiddler FullScreen

Upvotes: 2

Related Questions