Grow your CSS skills. Land your dream job.

floating problems with sidebar .

  • # January 3, 2012 at 11:56 am

    the link below related to my original theme that i want to code it.
    my theme screenshoot

    and this is a point that i was in now ( the problem ) :
    image for a problem

    the content area ( posts area ) take a div=”posts”, and the div id=”sidebar” for sidebar , i dont know why the sidebar still down and under the ( posts area ) althought i was float it .
    the main layout is :




    CONTENTS




    also this is my css style :



    #container {
    padding : 5px;
    border: 4px solid #0C0;
    background: orange;

    }

    #posts {
    background : #fdfdfd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    flaot : right;
    width : 670px;
    margin:0 0;
    }

    #sidebar {
    background : #e3aee3;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    float : left ;
    width : 240px;
    position : relative ;
    left : 0;
    top : 0;

    }


    #footer {
    background : #d48d78;
    }



    and note that the width of the wrapper is 960px .

    # January 3, 2012 at 12:19 pm

    You’ve spelled ‘float’ wrong on the #posts div:

    flaot : right;
    # January 3, 2012 at 12:35 pm

    thank you TheDoc ,, i really didnt notice this miss spelled ,,

    thank you very much , now it is working great ..

    but i need more questions , how can fill the float element to wrapped any things into this element .
    look at this picure , i have this problem PICTURE HERE
    i try to put an empty div but is not working …

    # January 3, 2012 at 2:09 pm

    A quick and easy fix is to add overflow: hidden; to your wrapper.

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

You must be logged in to reply to this topic.

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