Grow your CSS skills. Land your dream job.

Float Problem and gap after header?

  • # August 29, 2009 at 12:38 pm

    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

    # August 29, 2009 at 11:17 pm

    first thing you should do is download firebug for firefox and use it, by looking at your site with firebug, I can see that you have some margin under the div with id of navigation. So what I did was use firebug to change the ul#navigation to add margin: 0; and the space under the nav are was fixed. I would say go ahead and upload the image of how you want it to look from here.

    # August 30, 2009 at 11:36 am

    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

    # August 30, 2009 at 11:39 am

    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.

    # August 30, 2009 at 11:49 am
    "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.

    # August 30, 2009 at 12:01 pm

    yes, make a container for the maincontent and the sidebar. make sure to give the main content a width and give the sidebar a width. You can float the maincontent left and the sidebar left, then put a div underneath them with a class of clear and then in your css do

    .clear { clear: both }

    You need to clear the floats when you float something. If the wrapper isn’t wide enough, then you end up with the sidebar sliding down underneath the content like it is now. If you still can’t get it done, package everything up and put up a link for us to download so we can edit the code for you.

    # August 30, 2009 at 6:47 pm

    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!

    # August 31, 2009 at 1:57 pm

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".