Diseño roto: no puedo entender por qué

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.

Muchas gracias..

preguntado el 31 de julio de 12 a las 14:07

I'm using Chrome, and page looks fine to me. -

Looks fine in Chrome, broken in Firefox. Try fixing your errors first: validador.w3.org/… -

I think OP is referring to the fact that the page doesn’t adapt to the fill width if the browser is widened. Even when removing the max-width attributes, it stays at a smaller width. But @Sue, please specify which problem you specifically mean. -

i turned off in inspector display:block; property in id="wallpaper" and page looks fine in firefox. maybe you should try to remove class="clearfix" from there -

1 Respuestas

Eliminar el max-width atributo de la content-wrapper y establecer el 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


Further explanation of why max-width will not work:

Las max-width y 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 (verlo aquí - 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.

Respondido 31 Jul 12, 16:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.