Forums

bastunqk

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. [url=http://www.servimg.com/image_preview.php?i=1&u=18080285][img]http://i15.servimg.com/u/f15/18/08/02/85/prob10.png[/img][/url]

Thanks in advance.

HugoGiraudel

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.

Paulie_D

I suspect some box-model issue.

Ditto...plus he's mixing % and px.

HugoGiraudel

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

bastunqk

Here it is the basic html:

<html>
<body>
    <div id="whole" class="clearfixx">
        <div id="leftReoportaji" class="clearfixx">
            <span class="allVideo" class="clearfixx">Video is here</span>
            <span class="clearfixx">text text text</span>
            <hr/>
        </div>
        <div class="rightReportaji" class="clearfixx">
             <span class="allVideo" class="clearfixx">Video is here</span>
            <span class="clearfixx">text text text</span>
            <hr/>            
        </div>
    </div>
</body>
</html>

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; }

HugoGiraudel

Please make a JSFiddle or a CodePen.

wolfcry911

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...

bastunqk

here it is:

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

Paulie_D

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.

HugoGiraudel

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

Same here.

Paulie_D

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

maxisix

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

maxisix

He's right !

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

bastunqk

The spans was the problem. Thanks to everybody.

wolfcry911

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?

bastunqk

Could somebody explain to me how to clear floats the wright way? Because floats really confuses me.

Paulie_D

It's not really the floats that were your problem...it was the structure.

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

I've used the overflow:hidden method to clear the floats but there are others.

You might want to look at this too...which includes a simple grid and a clear method.

http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

treehouse : what would you like to learn today?

Forums

Floats problem

leftReoportaji {

rightReportaji {

wholee {