I'm trying to build a new app that serializes the topbar and sidebar and wraps them in a form tag, but prints the sidebar and results side by side.
So far I've tried to replicate it with flex, but unfortunately I haven't found a way. I only succeeded with float. However, I would like to use flex, if it is possible.
In addition, the results may not be included in the form tag, since this form contains its own tags and would therefore cause errors.
.app {
background-color: rgba(255,0,0,0.3);
padding: 40px;
}
.form {
display: unset;
}
.topbar {
width: 100%;
background-color: rgba(0,255,0);
}
.sidebar {
width: 20%;
float: left;
background-color: rgba(0,0,255,0.3);
}
.results {
width: 80%;
float: left;
background-color: rgba(0,255,255,0.3);
}
.app:after {
content: "";
display: table;
clear: both;
}<div class="app">
<form class="form">
<div class="topbar">Topbar</div>
<div class="sidebar">Sidebar</div>
</form>
<div class="results">results</div>
</div>You can imitate float type of behavior with margin-left/margin-right: auto when using flexbox, but you have to adapt the markup a bit as there has to be a container (with display: flex set) containing the elements as direct children that you want to "float". Something like this:
.app {
background-color: rgba(255,0,0,0.3);
padding: 40px;
}
.form__container {
display: flex;
}
.form {
width: 20%;
}
.topbar {
width: 100%;
background-color: rgba(0,255,0);
}
.sidebar {
background-color: rgba(0,0,255,0.3);
}
.results {
width: 80%;
margin-left: auto; /* this is the key to imitate float */
background-color: rgba(0,255,255,0.3);
}<div class="app">
<div class="topbar">Topbar</div>
<div class="form__container">
<form class="form">
<div class="sidebar">Sidebar</div>
</form>
<div class="results">results</div>
</div>
</div>Actually, @Paulie_D answered my question. Thats exactly what I wanted! Thank you! :D
.app {
display: flex;
flex-wrap: wrap;
background-color: rgba(255,0,0,0.3);
}
.form {
display: contents;
}
.topbar {
flex: 0 0 100%;
background-color: rgba(0,255,0);
}
.sidebar {
flex: 0 0 20%;
background-color: rgba(0,0,255,0.3);
}
.results {
flex: 0 0 80%;
background-color: rgba(0,255,255,0.3);
}<div class="app">
<form class="form">
<div class="topbar">Topbar</div>
<div class="sidebar">Sidebar</div>
</form>
<div class="results">results</div>
</div>