layout sizing help

[thadley]

Agh! I feel crazy after fighting with CSS!
Can someone tell me how to make this website look right on a smaller monitor? It looks terrific on my monitor at work, but I'm only so lucky to have a 1024x768 monitor! Should I try and do a fixed width on the layout? It seems like the images I place in the center column screw the layout up?? Help!

www.craftwarehouse.com/new

Code: Select all

#pageWrapper
{
margin: 0;
width: auto;
min-width: 500px;
}
#outerColumnContainer
{
z-index: 1;
border-color: #fff;border-style: solid;
border-width: 0 15em; }
#innerColumnContainer
{
z-index: 2;
width: 100%;
}
* html #innerColumnContainer
{
position: relative; }
#contentColumn
{
margin: 0 -1px; width: 100%;
}
#leftColumn, #rightColumn, #contentColumn
{
float: left;
position: relative; 
z-index: 10;
overflow: visible; }
#rightColumn
{
float: right; 
width: 15em;
margin: 0 -15em 0 1px; 
text-decoration: none;
}
#rightColumn ul li {
list-style-type:none;
}
#leftColumn
{
width: 15em;
margin: 0 1px 0 -15em; 
}
#footer
{
position: relative;
}
#masthead h1
{
display: inline; 
}
.nobullets ul li {
list-style-type: none;
}
.clear
{
clear: both;
padding-bottom: 1px; 
margin-bottom: -1px; 
}
.hide, #oldBrowserNotice, .ieSixCharDupBug
{
display: none !important;
}
#contentColumn
{
border-width: 0; }

[mreine]

Looks like your images are the problem! Try using divs and putting the images as backgrounds. The divs will allow more adjustment to browser width changes.

[thadley]

Originally Posted by mreine

Looks like your images are the problem! Try using divs and putting the images as backgrounds. The divs will allow more adjustment to browser width changes.

I agree that the problem with the layout is my images... they are wrecking it! If I change the layout to a fixed width and then adjust the image widths I can fix the crazyness from happening, but this is not an end-all solution...

Not quite sure how to incorporate the images into CSS and do the div tags in HTML page... I'm guessing in the CSS doc I would use the background image: URL()? How do I position it? I tried this with my header and it put it in a wierd spot in the head div. Is there a good tutorial somewhere out there that can explain this idea more clearly? Help!

[herkalees]

When posting lengthy code in your forum topics, please use the required [ CODE ] [/ CODE ] tags.