I’m looking for a solution where I can stack multiple div’s horizontally, but also define a class that stacks the element vertically.
<div class="parent">
<div class="child">Content 1</div>
<div class="child">Content 2</div>
<div class="child horizontal">Content 3</div>
</div>
Illustration:
Hi Stein_TheRuler_82, welcome to the forums! 
What should happen if the multiple elements dosn’t have enough room horizontally?
Also, the element(s) that stack vertically, where should its position be horizontally?
If there are a sequence of vertial elements should they continue stacking downwards?
Three is no problem. 
I’m looking for the same as ROW and COL in Bootstrap.
If I define a row like this:
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
if the screen is smaller than the MD breakpoint, the divs automatically stacks vertically
That breakpoint length value could be used in a media-rule to shift the row to a column.
OT) Sorry, but I have pass this on, I’ll be disconnected in a moment.
Hi,
I’ll pick up where Erik left of and try to offer some help.
Your “what I want” image is what floats would do naturally without any special clearing. However you can force the last one to drop down prematurely with an @media rule.
You could also get the same effect with flexbox I suspect, that would allow you to center them in the screen.
Here’s a simple float example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.parent {
overflow:hidden;/*contain floats*/
}
.parent div {
float:left;
min-width:200px;/*optional*/
padding:10px;
border:1px solid orange;
box-sizing: border-box;
}
@media screen and (max-width:700px) {
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="parent">
<div>Content 1</div>
<div>Content 2</div>
<div class="clear">Content 3</div>
</div>
</body>
</html>
Hi there Stein_TheRuler_82,
here is a “flex” example, to which @Ray.H referred…
<!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">
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
#container div {
width: 49%;
padding:1em;
margin: 0 0.5% 0.25em;
border: 1px solid #999;
background-color: #fefefe;
}
@media ( max-width: 30em ) {
#container {
display: block;
}
#container div {
width: 99%;
}
}
</style>
</head>
<body>
<div id="container">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo.
</p>
</div>
<div></div>
<div></div>
</div>
</body>
</html>
coothead
thanks! that was a step in the right direction.
is it possible to get the children to evenly share the space of the parent? if it for example are 4 children, they use width: 25%. but I don’t want to define the percentage, but make it happend automatically. if it’s possible off course.
thanks again!
(1) Is this not going to be used in a Boostrap page?
If it is, you should use the framework’s techniques to code that behaviour.
(2) Nothing happens automagically.
One can use media queries to effect layout changes at specific widths. You need to describe at what width changes need to occur and how it needs to change.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.