Hello,
I'm working on the Georgia Steel Guitar Association website at <!-- m --><a class="postlink" href="http://www.georgiasteelguitar.com">http://www.georgiasteelguitar.com</a><!-- m -->. (CSS is at <!-- m --><a class="postlink" href="http://www.georgiasteelguitar.com/gasga.css">http://www.georgiasteelguitar.com/gasga.css</a><!-- m -->.) It's really rough right now and I've got a lot of work to do on it but one thing that is nagging me urgently is boundary behavior in Mozilla and Firefox. When the window is resized small enough, the banner and any pictures in the "main" div stick out beyond the bounds of the div. How can I keep the div from collapsing beyond the width of the content within it, especially these images or other divs? Thank you very much in advance for your help and suggestions.
Chrisset min-width - real browsers understand it.Something like this may work for you:
body {
background: #000000 url('http://www.georgiasteelguitar.com/images/bggradient.png') repeat-y;
margin: 0;
font-family: georgia, serif;
font-size: 0.75em;
color: #ffffff
}
div.main {
width: 720px;
margin: 0 auto;
clear: both;
background: #f0f0f0 url('http://www.georgiasteelguitar.com/images/bggradient2.png') repeat-y;
color: #000000;
padding: 2em;
}
This way the width of the containing div is fixed and will never be smaller than your logo image. The downfall to this is that the clever "see-through" effect that you have is compromised by removing the top and bottom padding.
Just an idea,
-MikeVladdy and Wart_Hog, thanks very much for your replies. Vladdy, min-width worked like a charm. I'm still pretty wet behind the ears when it comes to CSS. I've been trying to do my research by haunting A List Apart and reading some of those articles. I think my next project is to tackle the "Sliding Doors of CSS" and make a nav bar.
Thanks again for your help!
I'm working on the Georgia Steel Guitar Association website at <!-- m --><a class="postlink" href="http://www.georgiasteelguitar.com">http://www.georgiasteelguitar.com</a><!-- m -->. (CSS is at <!-- m --><a class="postlink" href="http://www.georgiasteelguitar.com/gasga.css">http://www.georgiasteelguitar.com/gasga.css</a><!-- m -->.) It's really rough right now and I've got a lot of work to do on it but one thing that is nagging me urgently is boundary behavior in Mozilla and Firefox. When the window is resized small enough, the banner and any pictures in the "main" div stick out beyond the bounds of the div. How can I keep the div from collapsing beyond the width of the content within it, especially these images or other divs? Thank you very much in advance for your help and suggestions.
Chrisset min-width - real browsers understand it.Something like this may work for you:
body {
background: #000000 url('http://www.georgiasteelguitar.com/images/bggradient.png') repeat-y;
margin: 0;
font-family: georgia, serif;
font-size: 0.75em;
color: #ffffff
}
div.main {
width: 720px;
margin: 0 auto;
clear: both;
background: #f0f0f0 url('http://www.georgiasteelguitar.com/images/bggradient2.png') repeat-y;
color: #000000;
padding: 2em;
}
This way the width of the containing div is fixed and will never be smaller than your logo image. The downfall to this is that the clever "see-through" effect that you have is compromised by removing the top and bottom padding.
Just an idea,
-MikeVladdy and Wart_Hog, thanks very much for your replies. Vladdy, min-width worked like a charm. I'm still pretty wet behind the ears when it comes to CSS. I've been trying to do my research by haunting A List Apart and reading some of those articles. I think my next project is to tackle the "Sliding Doors of CSS" and make a nav bar.
Thanks again for your help!