Grow your CSS skills. Land your dream job.

Floats problem

  • # January 28, 2013 at 7:25 am

    Hello to everybody. Great forum.
    Could you please help me to understand whats happening with this container.
    I have container with id whole in this container i have two other divs with id leftReoportaji and rightReportaji and in them i have two spans which holds the video and the text.Video is also floated to left.
    Here is my CSS

    #leftReoportaji {
    padding: 0;
    width: 50%;
    float:left;
    border-right: 3px solid black;

    }

    #rightReportaji {
    padding: 0;
    width: 48%;
    float: right;
    }
    /*Inner video*/
    #allVideo {
    float: left;
    clear: both;
    padding: 5px;
    }

    #wholee {
    border: 3px solid black;
    }
    The problem is that the right div is not equal to left. HR is moved. Here is an image to see it.
    prob10.png

    Thanks in advance.

    # January 28, 2013 at 7:30 am

    Could please make a codepen.io or a jsfiddle.net? It’s hard to help you without being to play around with the code.

    However I suspect some box-model issue.

    # January 28, 2013 at 7:33 am

    > I suspect some box-model issue.

    Ditto…plus he’s mixing % and px.

    # January 28, 2013 at 7:40 am

    Without either border-box box-model or calc(). We’ll determine once we get to see the code.

    # January 28, 2013 at 7:59 am

    Here it is the basic html:


    Video is here
    text text text


    Video is here
    text text text



    and the css:

    #leftReoportaji {
    padding: 0;
    width: 50%;
    float:left;
    border-right: 3px solid black;

    }

    #rightReportaji {
    padding: 0;
    width: 48%;
    float: right;
    }
    /*Inner video*/
    .allVideo {
    float: left;
    clear: both;
    padding: 5px;
    }

    #wholee {
    border: 3px solid black;
    }

    .clearfixx:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    # January 28, 2013 at 8:07 am

    Please make a JSFiddle or a CodePen.

    # January 28, 2013 at 8:08 am

    You still haven’t give near enough information…

    The float heights seem to be derived from the amount of text. Notice the right float has one more line of text (probably because it’s 2% smaller in width than the left float). I’m guessing there’s a bottom padding or margin on the text span, or link…

    # January 28, 2013 at 8:12 am

    here it is:

    http://codepen.io/anon/pen/IitgG

    # January 28, 2013 at 8:16 am

    Yes, we understand but we don’t know the size of the video.

    However, I do think you have structured this rather badly. I wouldn’t be using spans at all.

    # January 28, 2013 at 8:17 am

    > However, I do think you have structured this rather badly. I wouldn’t be using spans at all.

    Same here.

    # January 28, 2013 at 8:17 am

    You also seem to have an ID for your left side and class for your right side….Ick!

    # January 28, 2013 at 8:18 am

    is it what you want http://cl.ly/image/3q2a1U2F2M1M ?

    # January 28, 2013 at 8:21 am

    He’s right !
    > However, I do think you have structured this rather badly. I wouldn’t be using spans at all.

    # January 28, 2013 at 8:21 am

    The spans was the problem. Thanks to everybody.

    # January 28, 2013 at 8:24 am

    I agree with Hugo and Paulie – not structured very well. Your pen doesn’t even closely resemble the problem in the pic. How are we to help if you won’t give us information? Why are you using the clearfix on everything?

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

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