Text is deforming my div - html

Question

The text is deforming my box.
here is what I have:
<div class="BigOne" ></div>
<div class="leftOne" ></div>
<div class="rightOne">This text is deforming the "leftOne"</div>
</div>
And the CSS:
.leftOne {
float: left;
width: 100%;
height: 100%;
border: 3px dashed #444;
border-radius: 7px;
box-sizing: border-box;
}
.rightOne {
float: left;
width: 100%;
height: 100%;
border: 3px dashed #444;
border-radius: 7px;
box-sizing: border-box;
}
How can I precent the text of right div for example, from deforming left div?
Thank you

Answer 1

What I understand from your question and explanation, you want the width of leftOne and rightOne to always be the same size regardless of BigOne's width. Then you'd want to change the width to 50% instead of 100% like so:
.leftOne, .rightOne {
float: left;
width: 50%; /* Change this to 50% instead of 100% */
height: 100%;
border: 3px dashed #444;
border-radius: 7px;
box-sizing: border-box;
}
Take note that you can refactor the CSS because both classes have the same styling. If you want to apply different styling to each of them, you can separate them back.
I also noticed that you have set the height of both of them to 100%. If you want them to maintain the same height, you need to specify the height of BigOne class. Eg:
.bigOne {
width: 100%; /*or whatever width you want to set it to */
height: 100px; /*or whatever height you want to set it to */
}
Another thing, you have an extra </div> on the first line. Remove it and your code should work.
<div class="bigOne">
<div class="leftOne"></div>
<div class="rightOne">This text is deforming the "leftOne"</div>
</div>
Hope that helps.