Question

0

173

Views

Alternative to float CSS

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>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-29T04:53:16.131Z

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>

Answer 2 · 2022-06-29T04:53:16.139Z

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>

0

173

Alternative to float CSS

2 answers

0

0

Find remote jobs

Andres GPT