I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes.
Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available width, it no longer follows the allocated percentage.
For example, if I remove the white-space: nowrap, the sections display correctly with percentages but do not show scrollbars and wrap the text instead.
Using fixed pixel widths works fine, but since my application window is resizable, I need the content to resize for different displays.
The desired effect is:
- Text should not wrap but be horizontally scrollable
- The sections should occupy the screen width based on percentages (35%, 65%)
How can I achieve this?
.Area {
white-space: nowrap;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid;
height: 50px;
font-family: "Courier New", Courier, monospace
}
html, body {
height: 100%;
font-family: Arial, Helvetica, sans-serif
}<table width="100%">
<tr>
<td style="width:35%;">
<div class="Area" id="Area1">
hello friends this is cell 1 line 1<br>
hello friends this is cell 1 line 2<br>
hello friends this is cell 1 line 3<br>
</div>
</td>
<td style="width:65%;">
<div class="Area" id="Area2">
hello friends this is cell 2 line 1<br>
hello friends this is cell 2 line 2<br>
hello friends this is cell 2 line 3<br>
</div>
</td>
</tr>
</table>