CODEWITHSUNDEEP
htmlcss
321
321

Reputation: 667

Layout Broken - can't understand why

My page here has the layout broken for some reason - the #main-content div should stretch across the page to the right hand nav (which is fixed at 348px).

Really not sure why, if someone could please have a look with a code inspector that would be great..and if you need the CSS & html pls let me know.

Many thanks..

Upvotes: 1

Views: 439

Answers (1)

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

Remove the max-width attribute from the content-wrapper and set the width of the wrapper to be 98.6% (accounting for your margins)

Note that you may have to repeat this for some of your other, wrapped divs/elements, in case you have other elements that are shorter than expected.

I tested with this solution with Chrome and it works perfectly - exactly as I believe it was intended

EDIT:

Further explanation of why max-width will not work:

The max-width and min-width properties may be thought of as intermediaries between fluid and statically sized elements. An element that does not have a specified width but has a specified min-width will be sized at either its default width or the min-width (the lower of the two). Likewise, an element that doesn't have a specified width but has a specified max-width will be set to its automatic width, but will only expand so far as it does not exceed its maximum width.

Min and Max widths can be used with defined widths, as well. For example, if you have an element for which you set the width to be width: 70%; but you do not want that width to exceed say 300px, you can set max-width: 300px; and the element will not exceed 300px, but it could be smaller than 300px, depending on the size of the container (which is what percentages refer to - i.e., if a width is set to a percentage, it will be that percentage of the containing element's width).

Real-world scenarios - these are two of the most common uses of min and max width that I have seen:

  • min-width - Situation: you are creating a webpage that has a fluid layout (gets wider/narrower when resizing the window) and a content section that you want to always be legible. You can set a min-width so that the section has a minimum size after witch the scroll bar will appear and the section will no longer shrink. I have a min-width implemented on my new homepage for just this purpose (see it here - adjust the size of your window to make it narrower and narrower and watch what happens when the main content [<div id="mainContentBack">] section reduces to be only 600px in width - that div is set to have min-width: 600px;).

  • max-width - The scenario that I described when I was explaining these properties is actually the most common that I have seen. The second most common, however, is when a developer chooses to create a textarea on their page (or sometimes even a whole section) that is resizable (user can click and drag to change the size). They set a maximum width so that the user cannot make the element any wider than was specified.

Upvotes: 1

Related Questions