[SOLVED] Dropped Float

When I started my stylesheet, everything was well under control ... then I started trying to fix odd and ends of things ... now my floated sidebar has dropped down below the content div. I have added and deleted so many things to my css as I was tweaking things that I have no idea what caused the div to drop, and I no longer have any idea what attributes are necessary in my styles, and what are superfluous. Could you please tell me what is wrong with my code to cause the sidebar to become misplaced? I feel like I am wandering aimlessly in a sea of code and rules right now.

I can't give you the url because geocities makes everything even worse. I have attached a skeleton of the html code, and my css stylesheet. None of the text has been styled yet. Thanks in advance for any suggestions you might have.

Attached Files

Peggy3.css (1.0 KB, 11 views)

Attached Files

skeleton.html (1.4 KB, 8 views)

Oh you were sooooooooooooo close! Here is the one piece of css you need to change:

Code: Select all

#content {width: 520px;
        height: 100%;
        float: left;
        clear: right;
        font-family: Arial, Verdana, sans-serif;
        padding-top: 15px;
        padding-bottom: 15px;
        border-right: 2px solid rgb(255,0,153);}

By getting rid of the margin-right: 260px you have now allowed the sidebar the ability to move up.
AND by reducing the width of this div to 520px instead of 526px, you now have room for both to sit side by side!

Thanks so much! I guess this gets better with experience, but now it seems like the more I fiddle with my original code, the more I lose track of what some of the positioning attributes are really doing to the page.

Now on to my next problem ... the sidebar is moved up, but I have a 5px tall image of a gradient the same width as the sidebar that I have repeating vertically for the length of the sidebar. This image is to go right up against the right border of the content area, but there is a fairly large gap between the two. I also want to make the sidebar the same length as the content area. Any chance of some help there?

This part in the css:

Code: Select all

#sidebar {float: right;
        width: 250px;
        height: 100%;
        margin-left: 2px;
        background: url(images/sidebar.jpg) 100% repeat-y;}

That "100%" is not correct there. Try using this instead:

Code: Select all

background: url(images/sidebar.jpg) top left repeat-y;

That should push it against the edges. If it's not touching the other side, try making the image wider...

About making the sidebar longer, this can only be achieved by padding. But let me ask, why? It looks fine the way it is...
But, if you insist, try adding this:

Code: Select all

#sidebar {float: right;
        width: 250px;
        height: 100%;
        margin-left: 2px;
        background: url(images/sidebar.jpg) top right repeat-y;
        padding-bottom: 150px; /* adjust this to your needs */
        }

Hope that helps!

Cheers

To make two columns the same height NO matter what amount of content is inside is best achieved by the use of "faux columns".

good lesson, i learn alot from this
who know, maybe one day i will need this

I learned alot too ... Thanks so much.