How to align three blocks one after another in css?

HTML & CSS
1

Hi there

This is my JSfiddle

I want to align header,main_block,footer block vertically but they are not organizing admin footer block is in front of main_block

What I want is how long my content in bottom sub block parent should expend according to content in block

2

vngx,

It would be good if you included a drawing that showed what you want the layout to look like and list any other requirements that you have.

I took a wild guess, anyway, and used display:table/table-cells for the columns. The header and footer are display:table because the classes were written in series in your original code. They could be written separately as ordinary block divs with no width applied, if you prefer.

This is a “working page”. Copy it to a file and open the file in your browser to see how it works.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/how-to-align-three-blocks-one-after-another-in-css/217865
vngx
-->
    <style type="text/css">

html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}

body {
    background:blue;
}
.outer {
    width:80%;
    margin:10% auto 0;
}
.header,.main_block,.footer {
    display:table;
    width:100%;
    table-layout:fixed;
    background-color:white;
}
.header {
    height:1em;  /* TEST height */
    padding:0 .5em;
    background-color:#fdf;
}
.footer {
    height:1em;  /* TEST height */
    padding:0 .5em;
    background-color:#ddd;
}
.masterBottomOne,.masterBottomTwo,.masterBottomThree,.masterBottomFour,.masterBottomFive {
    display:table-cell;
    vertical-align:top;
    padding:0 .5em;
}
.masterBottomOne {background-color:#def;}
.masterBottomTwo {background-color:#dfd;}
.masterBottomThree {background-color:#fed;}
.masterBottomFour {background-color:#dff;}
.masterBottomFive {background-color:#ffd;}
    </style>
</head>
<body>

<div class="outer">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="main_block">
        <div class="masterBottomOne">
            <p>This is Master One Content</p>
            <p>This is Master One Content</p>
            <p>This is Master One Content</p>
            <p>This is Master One Content</p>
            <p>This is Master One Content</p>
            <p>This is Master One Content</p>
        </div>
        <div class="masterBottomTwo">
            <p>This is Master Two Content</p>
            <p>This is Master Two Content</p>
            <p>This is Master Two Content</p>
            <p>This is Master Two Content</p>
            <p>This is Master Two Content</p>
        </div>
        <div class="masterBottomThree">
            <p>This is Master Three Content</p>
            <p>This is Master Three Content</p>
            <p>This is Master Three Content</p>
            <p>This is Master Three Content</p>
            <p>This is Master Three Content</p>
        </div>
        <div class="masterBottomFour">
            <p>This is Master Four Content</p>
            <p>This is Master Four Content</p>
            <p>This is Master Four Content</p>
            <p>This is Master Four Content</p>
            <p>This is Master Four Content</p>
        </div>
        <div class="masterBottomFive">
            <p>This is Master Five Content</p>
            <p>This is Master Five Content</p>
            <p>This is Master Five Content</p>
            <p>This is Master Five Content</p>
            <p>This is Master Five Content</p>
        </div>
    </div>
    <div class="footer">
        <p>This is Admin Footer</p>
    </div>
</div>

</body>
</html>

r.s.v.p.

1 Like
3

Thanks @ronpat

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.