spottedhaggis:
Hi
Glad you like my made up word, kinda describes anything you like, thats problematic anyway.
ok, I see the default setting offers a fairly large margin on both sides, I would like a much smaller one, around 5-10px max width either side.
I thought I had it cracked but then I changed my resolution and found it busted rather than cracked.
Here it is as it stands now
This is pretty much how I want it to look at any resolution, now if your viewing it at a typical 1024 then it will look awfull.
Here is an image of what it looks like on my screen and resolution.
If there was an easier way to fix what I have now that would be great, took me ages, lol.
Thanks
Simply make your width 99%, remove all the min-width/max-width, etc. You don't need a min-width, as your FREE SHIPPING banner will stop the site from getting narrower than it is.
Change #navMain to a width of 700px (its currently at 750px).
This will keep the top menu from breaking into two when the browser is narrower.
Now, the reason I had a max width of 1300px, is because some people have wide monitors, and I think sites in percentages look really silly when they are all spread out. But that's just one person's opinion. :smile:
Now, I see that you changed the width of your sideboxes, but did not follow the instructions on changing the widths in my readme.txt. Then you have this conflounded chunk in your source:
<div id="navColumnTwo" class="columnRight" style="margin-right:-136px; width: 188px">
Put that back to normal (remove the margin-right:-136px), then this section in your css should look like this (you increased your sideboxes by 38px from the default 150px, so I increased each value by 38px):
.outer {
padding-left:203px;
padding-right:188px;
}
.inner {
width:100%;
}
.float-wrap {
float:left;
margin-left:-203px;
width:90%;
}
#content {
float:right;
line-height:1.6;
margin-right:-203px;
position:relative;
width:100%;
}
.contentWrap {
padding: 5px 0 5px 5px;
}
#navColumnOne {
float:left;
position:relative;
border-right: 1px solid #cccccc;
}
#navColumnTwo {
float:right;
margin-right:-188px;
position:relative;
border-left: 1px solid #cccccc;
}
* html #navColumnTwo {
margin-right:-208px !important;
}