Floats problem

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

Thanks in advance.

[Kitty Giraudel]

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.

[Kitty Giraudel]

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:

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

[Kitty Giraudel]

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.

[Kitty Giraudel]

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

[Author]

Posts