Is it actually set to float:right in your CSS?
(This is where it gets fun with IE.)
Yep I sure do this is the section of my CSS which relates to the alignment.
div#container {
float: left;
width: 100%;
}
div#content {
margin: 0 222px;
}
div.sidebar {
background: #E7DBD5;
border: 1px solid #ccc;
overflow: hidden;
width: 195px;
}
div#primary {
float: left;
margin: 0 0 0 -100%;
}
* html div#primary {
left: 20px;
position: relative;
}
div#secondary {
float: right;
margin: 0 0 0 -100%;
}
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
Its all those fancy negative margins. Completely unnecessary.
Why not try: margin-right: 0px; or for IE
html>body margin-right: 0px;
That way FF and IE read it as no margin on the right.
Or you can do this:
margin-left: 780px; (depending how wide your template is), that positions your sidebar left or right, the higher the px the more right, the lower the px the more left.
I always use this (adjust as necessary):
#wrapper {width: 800px; margin: 10px auto}
#content{width: 600px; float:left}
#menu{width:200px; float: right}
.clear{clear:both}
That is it.
Thanks for all your help guys. I have tried doing it like that in the past and can not seem to get my content to align in the middle. If I float the content right both sidebars align to the left and vice versa. I want a sidebar either side of the content and the only way I have been able to that is with the code I posted above.
Can’t you do it using absolute positioning rathe than floats? Try:
#primary { position: absolute; left: 0px; width: 195px; }
#secondary { position: absolute; right: 0px; width: 195px; }
#content { position: absolute; left: 222px; right: 222px; }
hmmmm well that placed the content in the middle and the sidebars either side although the sidebars and the content box detached themselves from the header. See screenshot http://www.wealthontap.com/images/screenshot.gif
For 3 columns you need:
#wrapper {width: 800px; margin: 10px auto}
#main {width:600px; float:left}
#content{width: 400px; float:right}
#sidebar1{width:200px; float: left}
#sidebar2{width:200px; float: right}
.clear{clear:both}
Ok well it’s getting closer although I still have the same problem with the two sidebars aligning on one side instead of either side of the content. Maybe it’s just the way Scott has coded the theme? New screen shot http://www.wealthontap.com/images/screenshot.gif
Current code
div#wrapper {width: 922px; margin: 10px auto}
div#main {width: 922px; float:left}
div#content {
width: 456px;
float:right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
}
div.sidebar {
background: #E7DBD5;
border: 1px solid #ccc;
width: 195px;
}
div#primary {float: left}
* html div#primary {
left: 20px;
position: relative;
}
div#secondary {float: right}
.clear{clear:both}
* { padding: 0; margin: 0; }
Thanks again for all your help hopefully I can figure this out soon.
for your secondary, try:
margin-right: whatever%;
e.g. margin-right: 10%;
instead of float…may help
No I am afraid that didn’t work either. It’s strange how the CSS works fine on my home page in both browsers but as soon as I try and incorporate it into the Sandbox Theme it doesn’t work. Thats why I thought perhaps it’s the way the theme has been coded. Unfortunately Scott is not replying to my emails.
When I now select a theme the first place I test is on IE. I have avoided using themes that have IE issues after not being able to solve the problem. Research led me to this site though I have not used the info. It is a fun read!
http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/
Please let us know when you solve it…
Actually, I test in Opera and Firefox first (to ensure the code is correct), and then deal with IE.
But that’s just my preference … I’d rather tweak correct code for IE than create incorrect code that I must then fix for browsers that display more standardly.
