I am currently working on designing a page that requires multiple columns to be displayed. The columns should float left and never appear stacked on top of each other. Ideally, I would like the columns to extend beyond the screen without a scrollbar, making the excess content inaccessible.
However, I am facing an issue where my second column is appearing under the first instead of beside it.
<div id="container">
<div id="menu">
</div>
<div id="book">
<div id="column1" class="column_n">
</div>
<div id="column2" class="column_n">
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
border: 0;
font-family: Verdana;
font-size: 20px;
}
.column_n {
width: 480px;
margin: 20px;
float: left;
}