trouble with columns in HTML, How to keep columns from spanning off the edge of my page Options

[DarthMosher]

I am having Column issues with my HTML code. Please see my pic attached. I have Javascript that is sending over a random amount of text. I have four columns that are set sizes of 400px wide X 1200px height. I don't want two infinitely long columns because i want to be able to print the results and have columns 1 and 2 on sheet 1, then columns 3 and 4 on sheet 2 of the printout, etc. If i use CSS code "column-count: 4;", my text does split up nicely into separate columns, but once i get to column #3, it is displayed off the side of my webpage. I want to keep my webpage at 960px wide. How do i get columns 3 and 4 to "wrap" and be below, such as in a different row. I'm sure there is a way to do this as a table maybe? I even tried to limit "column-count: 2;", but when more text is displayed, it still makes a 3rd column off the side of the page. any help would be appreciated! (novice here). thank you! I've looked all over W3Schools and just can seem to find my example.

[Brian Chandler]

I don't think anyone can help without seeing the basic html structure you are using. You show these as four boxes, two above and two below, so why are they called "columns"? And your fixed sizes are not generally a good idea; "pixel" is not a transportable unit from one display system to another - if you are really producing a printed page, you should use physical length units like mm, to fit the page size.

[nootkan]

Brians, right without seeing the html or text/data inside the columns it won't be easy to determine what method you should use.

If it is tabular data or text I always use this table generator for my needs as it speeds up my work and does a good responsive job of creating tables.

https://www.htmlcodegenerator-tools.com/201...e-friendly.html

Here is another generator you can check out that may do what you want.

https://htmlcsscolumngenerator.anthonycarbon.com/

This post has been edited by nootkan: Dec 18 2021, 01:51 PM

[DarthMosher]

Thank you for the info, ill see if tables will get me what i need.

[ArCs Cyber]

Hello DarthMosher,

-Your page have a fixed width of 960px
-You have a table with 4 columns
-Each column is 400px wide
-You want to display only 2 columns in a row

If i get your question right, then here is the answer.

CODE

<table style="width:950px; height:auto; overflow:auto; margin-left:auto;margin-right:auto">
<tr>
<td style="width:400px;height:1200px; word-break:break-all; word-wrap:break-word">
your content
</td>
<td style="width:400px;height:1200px; word-break:break-all; word-wrap:break-word">
your content
</td>
</tr>
<tr>
<td style="width:400px;height:1200px; word-break:break-all; word-wrap:break-word">
your content
</td>
<td style="width:400px;height:1200px; word-break:break-all; word-wrap:break-word">
your content
</td>
</tr>
</table>

i would have done it like this.
I cannot tell about your exact requirement. I made this solution as per my assumption and understanding.