CODEWITHSUNDEEP
htmlcss
Anirudh Lou
Anirudh Lou

Reputation: 831

How to place a div below another div and fill the size?

I am converting my desktop project into web, and I have this layout so far. My concern is how can I place my div next below another div and take/fill the parent width. My aim is to show (depending on the selected view: list view, kanban view, and form view) lt-list, lt-kanban, and lt-form just below the buttons. This is what I've done so far:

.lt-content { grid-area: content; height: 85vh;}

#lt-button {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
}

#lt-view {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : right;
}

#lt-list {
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
    background: #9ec4ff;
    width: inherit;
}

#lt-kanban {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
    background: #a3ffa3;
}

#lt-form {
    vertical-align:top;
    display: inline-block;
    padding : 0;
    margin : 0;
    float : left;
    background: #fff5b7;
}

and here is my html:

<div class="lt-content">
    <div id="lt-button" style="position: relative">
        <div class="btn-group btn-group-sm" role="group" style="background: " aria-label="Basic example">
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">CREATE</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">EDIT</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">DELETE</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">SAVE</button>
            <button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">CANCEL</button>
        </div>
    </div>
    <div id="lt-view">
        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fas fa-list" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fas fa-th-large" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fab fa-wpforms"></i></button>
        </div>
    </div>
    <div id="lt-list">
        This is a list view....
        <br>
        This is a list view....
        <br>
    </div>
    <div id="lt-kanban" style="position: relative">
        This is a Kanban view....
        <br>
        This is a Kanban view....
        <br>
    </div>
    <div id="lt-form" style="position: relative">
        This is a Form view....
        <br>
        This is a Form view....
        <br>
    </div>
</div>

This is the image of my layout:

enter image description here

Upvotes: 1

Views: 1197

Answers (3)

Akash Srivastav
Akash Srivastav

Reputation: 766

First of all, when you use the float: right/left property afterwards, the display: inline-block gets overridden.

You can get the desired results in a number of ways, grid layout, flex, etc. Using floats and the such to make it work won't be the best. Here's an example using flex. I got rid of all the floats, vertical-align and inline-blocks, and wrapped your buttons in a div and added a class.

Here you go

Upvotes: 1

Huskell
Huskell

Reputation: 323

Add two divs, one that wraps lt-button and lt-view, and another (with id board) that wraps the lt-list, lt-kanban and lt-form

Then add this css:

.lt-content {
    display: flex;
    flex-flow: column;
}
#board {
    display: grid;
    grid-auto-flow: column;
    height: 100%;
}

That is, if your objective was to make three columns with those colors, but it will give an idea.

Upvotes: 0

Syfer
Syfer

Reputation: 4479

Change the css for #lt-button to be the following:

#lt-button {
    display: block;
    padding : 0;
    margin : 0;
}

This will get the list view, kanban view, and form view under your buttons. After that you can use js/jQuery (or other scripting language) to show and hide divs based off clicks.

Upvotes: 0

Related Questions