I’m working on a piece of a design and for some reason this is giving me fits. All I’m looking for is to set four divs horizontally side by side with fluid widths so that when the browser is resized smaller, these divs stretch in size rather than stack vertically like they would do in a typical floated layout when there’s not enough space to accommodate them all. What needs to be added to this so that these four divs will simply stay in a horizontal row and expand (no wider than 200px) and contract when the window is resized?
Try this please:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/seemingly-simple-max-width-on-horizontal-divs/235034
deronsizemore
Aug 28,2016 11:23 AM
-->
<style type="text/css">
.colonnade {
display:table;
width:100%;
max-width:800px;
margin:0 auto;
outline:1px solid magenta; /* TEST Outline. To Be Deleted */
}
.colonnade > div {
display:table-cell;
height:400px; /* DEMO ONLY. TO BE DELETED. */
width:25%;
outline:1px dotted blue; /* TEST Outline. To Be Deleted */
}
</style>
</head>
<body>
<div class="colonnade">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Thanks. I think that gets me close enough to what I’m after. I still don’t quite understand why my original code doesn’t work?
Here’s more of what I’m working with rather than just a general “four divs.”
I’ve given each .select a width of 20%. Why does max-width: 200px not work in this situation either? I guess I’m missing some understanding of max-width.
I could accomplish basically what I’m after by simply using 20% width on the original example I gave rather than min-width: 200px and not have to use display:table
Applied to which element? (max-width is not in your CSS so I feel obligated to ask).
EDIT: I will take a guess that you are attempting to apply max-width or min-width to display:table-cells. Table-cells do not accepts max and min-widths. Table-cells expect to the children of tables or table-rows. It is from the table that they “inherit” their expected behavior. In your code, you have display:table separated from the table-cells by a div layer so the table cells have no natural parent. They are mischievous delinquents.
You have display:table-cells (improperly applied). Why is display:table an issue?
1 Like
Hi there deronsizemore,
perhaps you might find “flexbox” to be of interest. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background: #f0f0f0;
}
#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#container div {
width: 24%;
max-width: 12.5em;
margin: 0.25em 0.5%;
padding: 1em;
border: 1px solid #999;
box-sizing: border-box;
box-shadow: 0.1em 0.1em 0.1em #999;
background: #fff;
}
@media screen and (max-width:27em) {
#container div {
width: 49%;
}
}
@media screen and (max-width:13.5em) {
#container div {
width: 99%;
}
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>coothead
1 Like
Applied to which element? (max-width is not in your CSS so I feel obligated to ask).
Sorry for confusion. I was referring to my original post in regards to max-width.
I don’t have a problem using display:table. Honestly as long as it works, I don’t care how I get there, I was just curious as to why max-width wasn’t doing what I thought it should do. Seems that if I set the width to 100% and then give it a max of 200px, then it won’t expand wider than 200px but should still collapse to less than 200px when the browser is resized.
But that’s not how it’s working so obviously what I think should happen isn’t what should happen.
Thanks. I’ve only messed around with Flexbox a little bit, but yeah I think it could work as well. I’ll tryout your code and see what I get.
Thanks!
Did the explanation in the next paragraph, the “Edit”, help?
Did the explanation in the next paragraph, the “Edit”, help?
Sorry. No, not really because my original post (and jsfiddle) wasn’t dealing with display:table and table cells. It was just basic code with max-width applied.
OK, sorry. Guess I became sidetracked because the fix for your inline-block boxes would be similar to the table/table-cell approach. That’s my excuse for my absent mindedness, anyway.
See if this answers your question:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/seemingly-simple-max-width-on-horizontal-divs/235034
deronsizemore
Aug 28,2016 11:23 AM
-->
<style type="text/css">
.outer {
max-width:800px;
margin:0 auto;
}
.container {
display:table;
width:100%;
word-spacing:-.5em;
text-align:center;
outline:1px dashed red;
}
.container > div {
display:inline-block;
width:22%;
background:red;
word-spacing:0;
}
div + div {
margin-left:4%;
}
</style>
</head>
<body>
<div class="outer">
<div class="container">
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
<div>Some Text</div>
</div>
</div>
</body>
</html>
The sum of the width of the boxes and margins cannot be allowed to exceed the width of their container or they will wrap. Yours were wrapping for that reason.
In the above example, the four boxes have a width of 22% each and there are three margins between them of 4% each. 88% + 12% = 100%.
The max-width is applied to the outer container which is effectively 200px per box including the margins.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.