Home/ Questions/Q 6044993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:04:32+00:00

I have a item (e.g. a div tag, which takes 1/3 of the screen-width

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0