HTML fullscreenlayout with min-width, max-width

Question

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

It would help if you can post any css code that you are using. Also the html code that you are using will help us in figuring out the issue. — Aziz Shaikh, Jun 22 '11 at 06:41
hope this makes it clearer, it tried to keep it as simple as possible — Stefan, Jun 22 '11 at 07:04
For the life of me, I don't see a min-width set on the left div (or a max-width of 700px — symlink, Feb 02 '13 at 09:21

score 2 · Accepted Answer · edited May 23 '17 at 10:08

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

i might have understood you wrong. i will again and adjust my answer properly. — Rafael Herscovici, Jun 22 '11 at 09:16
the problem is, that I the min-, max- width/ heigth don't take effect all the time. So your posts weren't so wrong, they solve my problem sometimes, but most of the times I just want to use Percentage for the Layout..... So I wont come around of some JavaScript code.... I will post it when I solved it! — Stefan, Jun 22 '11 at 09:45

HTML fullscreenlayout with min-width, max-width

1 Answers1

Linked