Why do my columns wrap with window resize? - html

Question

I am trying to add four columns, evenly-spaced, on a webpage that keep their structure when the browser window is resized. I built it this way based on a tutorial which I can't find now. They appear fine until you resize the browser window. Can anyone tell me why my 3rd and 4th columns keep wrapping under the first two when the browser window is resized?
#ColumnMain {
width: 100%;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
min-width: 44%
}
.col1 {
float: left;
padding: 10px 20px 15px 20px;
margin: 0;
width: 350px;
height: 100px;
border-left: solid 1px #35488C;
}
.col2 {
float: left;
padding: 10px 20px 15px 20px;
margin-left: 10px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
}
.col3 {
float: right;
padding: 10px 20px 15px 20px;
margin: 0;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
overflow: hidden;
}
.col4 {
float: right;
padding: 10px 20px 15px 20px;
margin-right: 10px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
Overflow: hidden;
}
<div class="columns" id="ColumnMain">
<div class="col1">content-1</div>
<div class="col2">content-2</div>
<div class="col3">content-3</div>
<div class="col4">content-4</div>
</div>

Answer 1

You're setting a fixed width to the first columns, which is not adaptive, and is pushing back the last divs. If you need a fixed width, but still want to keep every div inline, you can use display: table; layout. That way your first div will always have the same size, and the others will be dynamic.
#ColumnMain {
display: block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
min-width: 44%
}
.col {
display: table-cell;
padding: 10px 20px 15px 20px;
height: 100px;
border-left: solid 1px #35488C;
}
.col1 {
margin: 0;
width: 350px;
}
.col2 {
margin-left: 10px;
width: 22%;
}
.col3 {
margin: 0;
width: 22%;
overflow: hidden;
}
.col4 {
margin-right: 10px;
width: 22%;
overflow: hidden;
}
<div class="columns" id="ColumnMain">
<div class="col col1">content</div>
<div class="col col2">content</div>
<div class="col col3">content</div>
<div class="col col4">content</div>
</div>

Answer 2

You have specified different width for first column and other columns, to make it resizeable they should be given percentage width or you have to use bootstrap CSS.
And also with margin it will not work with same percentage width. in this case you have to calculate each column width after applying margin/padding with relative to window/document width and then apply in width style. You have to also calculate the same on window resize event.
Remove margin from your column style and add below one property:
box-sizing:border-box;
For testing purpose I have change your first column width to 200px, better to assign 25% width to each column to test.
#ColumnMain {
width: 100%;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
min-width: 44%
}
.col1 {
float: left;
padding: 10px 20px 15px 20px;
width: 200px;
height: 100px;
border-left: solid 1px #35488C;
box-sizing:border-box;
}
.col2 {
float: left;
padding: 10px 20px 15px 20px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
box-sizing:border-box;
}
.col3 {
float: left;
padding: 10px 20px 15px 20px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
overflow: hidden;
box-sizing:border-box;
}
.col4 {
float: left;
padding: 10px 20px 15px 20px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
Overflow: hidden;
box-sizing:border-box;
}
<div class="columns" id="ColumnMain">
<div class="col1">content</div>
<div class="col2">content</div>
<div class="col3">content</div>
<div class="col4">content</div>
</div>

Answer 3

Your col1 is a width of 350px. Once it gets to a certain size, 22% +22% +22% + 350px is larger than the width of the ColumnMain. So it pushes some of the columns down so they can all fit.

Answer 4

The reason your div's are being wrapped under one another is because when the browser resizes, it hits those widths that you have on those individual .col class and it cannot fit anymore so the div's go under one another.

Answer 5

It is easier and cleaner to just simply rewrite the CSS so that you only need one selector for columns. This makes the code much easier to maintain, and to change. For example, you would only have to change the border or the padding in one location and it would work automatically for all elements that apply the class. Here is the simplified code for what you wish to accomplish:
.col {
float: left;
padding: 10px 20px 15px 20px;
margin: 0;
width: 25%;
height: 100px;
border-left: solid 1px #35488C;
box-sizing: border-box;
}
<div>
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
</div>
Here is an example of the output in gifv format: http://i.imgur.com/VgBByqf.gifv
If you decide that you don't want the border line before the first column (the left-most column), in your CSS code, you would add this pseudo-class underneath your .col selector:
.col:first-child {
border-left: none;
}

Answer 6

<html>
<head>
<style>
.cols_ex {
-webkit-columns: 4 10px;
-moz-columns: 4 10px;
columns: 4 10px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 2px dashed gray;
-moz-column-rule: 2px dashed gray;
column-rule: 2px dashed gray;
}
</style>
</head>
<body>
<div class="cols_ex">
<p>Just at this moment her head struck against the roof of the hall: in fact she was now rather more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.</p>
<p>Poor Alice! It was as much as she could do, lying down on one side, to look through into the garden with one eye; but to get through was more hopeless than ever: she sat down and began to cry again.</p>
<p>"You ought to be ashamed of yourself," said Alice,"a great girl like you" (she might well say this), "to go on crying in this way! Stop this moment, I tell you!"</p>
<p>But she went on all the same, shedding gallons of tears,until there was a large pool all round her, about four inches deep, and reaching half down the hall.</p>
</div>
</body>
</html>

Answer 7

As others have said, .col1 has a fixed width, so at some point, the percentage based widths on the other columns in addition to the fixed width will be greater than 100% width, causing the columns to wrap.
A more modern way to create a row of columns like this is to use display: flex and that will put them in a row and they won't wrap (unless you specify that you want it to wrap using flex-wrap).
And here's an example of a #media query that will lay the columns/rows out differently at different screen widths.
.columns {
min-width: 44%;
margin: auto;
display: flex;
}
.col {
padding: 10px 20px 15px 20px;
}
.col1 {
width: 350px;
height: 100px;
border-left: solid 1px #35488C;
}
.col2 {
margin-left: 10px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
}
.col3 {
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
}
.col4 {
margin-right: 10px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
}
#media (max-width: 420px) {
.columns {
flex-direction: column;
}
.col {
margin: 0;
width: auto;
}
}
<div class="columns" id="ColumnMain">
<div class="col1 col">content</div>
<div class="col2 col">content</div>
<div class="col3 col">content</div>
<div class="col4 col">content</div>
</div>