Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
The site I'm working on seems to appear ok in Firefox and IE, but I'm having problems in Safari 3.1.1 on pc and mac. The right "navPanel" div falls below the left content div. Could someone have a look and give me some direction on fixing this issue?
http://www.advancecleanup.com/test.php
Thanks! -
I think you're overthinking some things.
Ok, so #wrapper has a width of 920px. But, you are trying to stick something that is too wide:
779px (#content, width: 700px + 75px padding + 4px border) + 200px (#navPanel) = 979px
I see you are using negative margins and so forth, but it's a lot simpler than that. Try this:
#content {
float: left;
margin: 15px 0 20px 0;
text-align: left;
width: 621px;
padding: 10px 15px 30px 60px;
background: #fff;
border: 2px solid #cccccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#navPanel {
text-align: left;
padding-top:30px;
float: right;
width: 200px; /*Width of right column in pixels*/
}
Now, that will decrease the width of your content area, so you may have to play with that. -
Hey davist,
Thanks for the tips and suggestions! That seems to have cleared up the problem. I forgot to include the padding in the width of the wrapper. I'm surprised firefox allowed that to slide.
So, when I'm looking at doing a 2 column layout, is floating one left and the other right the standard way of doing that these days? I'd like to have one way of doing it that will consistently work, but by the time I get around to needing to build another website the method changes again. I'm looking forward to the "column" property in css 3.
Thanks,
Jason -
I think floating 1 left and 1 right is a pretty standard way of doing it. This also helps if you are going to have a margin in between, then you don't have to worry about setting a margin on any elements since the floats will be in opposite direction.
-
Hi , I have been stumped on this problem for a few hours now and I really need external help!!
Home Page
In firefox / IE it all seems ok in my browsers.
In Safari 5.0 on a Mac it is showing a horizontal scrollbar. The "computed style" when I inspected the element of the shows width: 1846px; I don't use safari much apart from cross-browser compatability testing so not sure what "computed style" means. I assume it's the calculated style of what I am looking at in that specific browser with my computer hardware, just an assumption - please correct if I am wrong.
I have a feeling it is some CSS somewhere causing this to happen (margin / padding somewhere maybe?) but I can't find it.
Any help much appreciated - hopefully it's an easy one to fix.
Thanks in advance,
Mikey_c_9 -
It actually has a horizontal scroll-bar in IE too, although it doesn't scroll - just grayed out.
Anyone got any ideas?
1 to 6 of 6