Float Problem and gap after header?

[WildSpirit]

I’m working on this website and had a sidebar floated right but text from my main content area was running underneath it and I didn’t like how it looked. I ended up floating the main content to the left instead BUT now my sidebar wont go to the right… I thought maybe it was a typical drop float problem but I’ve played with my margins and padding and width of sidebar to see it that would bump it back up into place but no luck!

Also, I have a gap after my header. What i’ve done in the past to fix that problem doesn’t seem to be working. Once the gap is gone, my other concern is that my content is going to start to far down the page. However I want to have that water drop ripple run under the pic into that background (lighter blue) color. (I can upload a image of how I want it to look if I’m not being clear enough!)

Help for the float, gap, and content starting higher on the page would be incredible!
http://ecosafeseptic.com/beta/index.html

Thanks!
Lyle

[WildSpirit]

Thank You with help for the gap! I actually do have firebug and it has helped me immensely. I think the problem is I’m still new to coding (this is only my third site) so I’m still trying to figure everything out with different layouts! I hope this gets easier at some point!

Anyways, I’m attaching a image of how I want it to look. Still having problems getting my sidebar to move up and to the right of the main text and photo. Also would like everything under the navigation to start closer to the navigation bar like in my mock up…

Thanks in advance!
Lyle

[phillseemore]

"cybershot" wrote:

one thing you can start doing is start researching css resets. Every browser is different and have different values. Some use a hard reset like this

* { margin: 0; padding: 0; }

the * says to apply the rule to everything. Add that to your css and see how your site changes.

This, and also you need to make a container for your "main content" and side bar so you should have a container, then float your main content to the left, then float your right sidebar to the right. That should take care of everything.

[WildSpirit]

Thanks! I think I got it! I lost that light blue background color but it seems to be showing now since I added it two the page wrap div. Had to use negative numbers to position the copy and sidebar divs where I wanted them. Hope that won’t cause any problems!

http://ecosafeseptic.com/beta/index.html

One page down! (at least until I check it out in IE lol)

Thanks again!

Lyle

PS – I had the *reset actually in there but I’ll have to play around to see what it does!

[phillseemore]

It works in IE8, glad to see you got it working. :D

[Author]

Posts