Menu
I'm trying to accomplish some atypical div behavior, so I'm not sure if this is possible.
I have three divs which sit next to one another horizontally: A, B, and C (from left to right). When the browser is resized, or if a user's browser window is too small, I would like div B to drop below div A, rather than the typical behavior where div C drops below div A.
The typical behavior is demonstrated by this code:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
http://jsfiddle.net/P5xLx/
When I place divs A and B in one table-cell and div C in another, I can get div B to drop below div A. The only issue with this is that the left table-cell which contains the two divs does not collapse to the width of the two divs, and so there is still a gap between divs A and B and div C. This code shows that behavior:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div style="display: table-cell;">
<div class="box" style="height: 500px;">div c</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/cncgs/
Is there a way to make the left table-cell take the width of the two stacked divs, or maybe there is some other way to accomplish this which doesn't involve the table at all. Basically, I just need to find a way for div C to sit next to A and B once B drops below A. I'm trying to find a css solution and avoid using a javascript solution which, for example, calculates the width of A and B and compares it to the width of the left table-cell.
EDIT In the examples above, the widths are 200px, but in the actual implementation, that 200px is a variable width, depending on user-submitted content. I'm looking for a solution which can deal with variable-width columns.
618
How does this suit? Using media queries to change the width of the container for the first two divs:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type="text/css">
.box {
display: block;
margin: 4px;
background: #ccc;
width: 200px;
float:left;
}
.leftCol{width:416px; float:left}
@media screen and (max-width: 1000px){
.leftCol{width:208px;}
}
</style>
</head>
<body>
<div class="leftCol">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
Obviously the widths will vary depending on what you’re building.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
