0

I' a web developed beginning to dabble in CSS.

For a Django web app of mine, I'm trying to get a <textarea> and a <div> side-by-side as inline neighbors. Moreover, I need them to be fully responsive across screen sizes.

My code so far is:

<textarea cols='40' rows='3' class='cxl' style='width:70%;float:left;height:70px;border-radius:10px;border: 1px #CFD8DC solid;background-color:#FAFAFA;'></textarea>
<div style='display:inline-block;float:left;background-color:lightgrey;width:25%;height:70px;border: 1px solid lightgrey;text-align:center;font-weight:bold;border-radius:10px;color:white;'>IM A DIV</div>

The above is wrapped up in a div like so:

<div style="max-width:600px;width:95%;">
</div>

Currently, they're successfully lining up. However, if I keep width:70% for the <textarea> and width:30% for the div, the alignment is lost. Next, I lessen the latter to width:29%. The elements line up, however smaller screen-sizes immediately break it up. I.e. very weak responsiveness.

If I keep lowering width point by point, I experience a greater amount of tolerance to decreasing screensizes. Ultimately, if I go with width:70% and width:25%, the elements line up for screen sizes as small as my requirements.

Why doesn't it just work with width:70% and width:30%? And what can I do to ensure they work like that?

Hassan Baig
  • 15,055
  • 27
  • 102
  • 205

1 Answers1

2

The border adds to the effective width of the div so the total effective width of the two elements adds up to more than 100%.

You could set the box-sizing property of the div to border-box. That way, it will include the border in the 30% and everything should work as intended.

https://css-tricks.com/box-sizing/

SimonW
  • 309
  • 3
  • 8