Question

I have menu bar and code is as follows

<div style="background:#000; height: 25px;">
    <div  style="margin-left: 25%; margin-right: 20%; font:13px/27px Arial,sans-serif;">
        <a href="1.html"  style="text-decoration:none; color:#333;"><div class="activeMenu" name="menuNew">1</div></a>    
        <div class="activeMenu" name="menuNew"></div>    
        <a href="#" ><div class="activeMenu" name="menuNew">2</div></a>    
        <a href="#" ><div class="activeMenu" name="menuNew">3</div></a>    
        <a href="#"><div class="activeMenu" name="menuNew">4</div></a>    
        <a href="#">5</div></a>    
        <a href="register.html"  style="text-decoration: none;" ><div class="activeMenu" name="menuNew">6</div></a>    
    </div>    
</div>

when i resize the browser window , the all the menus inside this div, they keep piling on each other , it looks pretty bad

I want to restrict this menu resize when we resize the screen ?

Answer 1

You can use min and max , height/width to any blocks

<div style = "min-height : 300px; max-height : 1024px"> Smthn </div>

The above div will not exceed 1024px and go below 300px in height. You can try the same with width also.