Eric Guo Eric Guo - 1 month ago 9
CSS Question

How to control max-width using divs within another div?

Right now I am creating a website and I have text boxes style close to each other each using a unique div. When I resize the browser the divs over lap each other so I was thinking of using max-width to keep everything together. I have successfully used this code

html {
min-width: 1000px;
max-width: 1000px;
margin: 0 auto;
height: 100%;
}


to keep the max-width at 1000px but my text boxes are ignoring this and just doing their own thing. I tried to create a div to control all my divs but it is not working. Any help would greatly be appreciated.

HTML: http://pastebin.com/tSXwCmPf
CSS: http://pastebin.com/vEzqxSRW

Answer

Your <div class="wrapper"> was closed incorrectly the closing bracket needs to be at the bottom of your code for the elements to adapt the min-width.

<div class="wrapper"> <img src="images/LOGO.png"/> <ul class="menu"> <li><a href="../menu.html">Menu</a></li> <li><a href="../map.html">Map</a></li> <li><a href="../info.html">Store Info</a></li> <li id="no-link">Order Now</li> </ul> /* other html code needs to be here */ </div> /*This </div> needs to be after your blocks */

div.wrapper { width: 120%; min-width: 1000px; height: auto; position: relative; left: -10%; margin-top: 17% }