CODEWITHSUNDEEP
cssalignment
DasBoot
DasBoot

Reputation: 479

css layout align bottom and center

So this is how the document looks like:

http://jsfiddle.net/3ty4gvda/

<div class="middle-row">
        <div class="middle-row-titles">
            <h2>This is a header</h2>
            <p>This is a paragraph</p>
        </div>
        <div class="middle-row-graphs">
            <div class="graph-column columnss">
                <h2>12%</h2>
                <div class="graph first-graph">
                </div>
                <p>caption four</p>
            </div>
            <div class="graph-column columnss">
                <h2>18%</h2>
                <div class="graph second-graph">
                </div>
                <p>caption three</p>
            </div>
            <div class="graph-column columnss">
                <h2>22%</h2>
                <div class="graph third-graph">
                </div>
                <p>caption two</p>
            </div>
            <div class="graph-column">
                <h2>23%</h2>
                <div class="graph fourth-graph">
                </div>
                <p>caption one</p>
            </div>
            <div style="clear: both"></div>
        </div>

    </div>

As you can see it has 4 columns which represents a diagram. I have two questions:

  1. How can I position all these diagrams in the center instead of leaving them on the left?
  2. Is there a way to align those bars to the bottom of a parent div? The captions and bottom lines of the bars should be in the same height.

I want to achieve these without flexbox, because it doesnt work in IE. Thank you

PROBLEM SOLVED: Look at "Mary Melody" comment below.

Upvotes: 1

Views: 175

Answers (3)

Przemysław Melnarowicz
Przemysław Melnarowicz

Reputation: 1057

Just few changes in your code (add text align on parent, display: inline-block + remove floats on chlidren). And you can remove clearing div.

.middle-row-graphs {
    display: block;
    margin: 2% auto 0;
    width: auto;
    text-align: center;
}

&

.graph-column {
    text-transform: uppercase;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}

Upvotes: 0

invinciblejai
invinciblejai

Reputation: 1293

To position all these diagrams in the center you can try out margin:0 auto to the container div which has to be positioned to center. Below code will help to get solution of point 2 :

HTML:

<div class="middle-row">
            <div class="middle-row-titles">
                <h2>This is a header</h2>
                <p>This is a paragraph</p>
            </div>
            <div class="middle-row-graphs">
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>12%</h2>
                    <div class="graph first-graph">
                    </div>
                    <p>caption four</p>
                </div>
                </div>
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>18%</h2>
                    <div class="graph second-graph">
                    </div>
                    <p>caption three</p>
                </div>
                </div>
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>22%</h2>
                    <div class="graph third-graph">
                    </div>
                    <p>caption two</p>
                </div>
                </div>
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>23%</h2>
                    <div class="graph fourth-graph">
                    </div>
                    <p>caption one</p>
                </div>
                </div>
                <div style="clear: both"></div>
            </div>

        </div>

CSS :

.middle-row, .bottom-row {
    background-color: #e4e4e4;
    margin: 0;
}
.middle-graphs {
    background: #e4e4e4;
}
.bottom-thumbs {
    background: #e4e4e4;
}
.middle-row-graphs {
    /*display: -ms-flex;
    -ms-align-items: flex-end;
    justify-content: center;*/
    margin: 2% auto 0;
    width: 960px;
}
.graph-column {
    text-transform: uppercase;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
    height:100%;
    width:25%;
    max-width:230px;
}
.columnss h2 {
    margin-top: ;
}
.middle-row-graphs div:first-child h2 {
    color: #005d83;
}
.middle-row-graphs div h2 {
    font-weight: 700;
}
.graph {
    background-color: #999999;
    width: 100px;
    margin: 0 auto;
}
.first-graph {
    height: 60px;
    background-color: #005d83;
}
.second-graph {
    height: 90px;
}
.third-graph {
    height: 115px;
}
.fourth-graph {
    height: 120px;
}
.middle-row-titles h2 {
    padding-top: 2%;
    margin: 0;
}
.middle-row-titles p {
    margin: 0;
}
.graph-column-inner{
    position:absolute;
    bottom:0;
}

Upvotes: 0

Alex Doe
Alex Doe

Reputation: 934

Inserted new div inside the graph-column and just worked with position relative and absolute,

.graph-column {
    position: relative;
    height: 222px;
    width: 150px;
}
.column-inside {
    position: absolute;
    bottom: 0;
}
.column-inside h2 {
    text-align:center;
}

<div class="graph-column columnss">
   <div class="column-inside">
       <h2>12%</h2>
       <div class="graph first-graph">
       </div>
       <p>caption four</p>
   </div>
</div>

you can check it here http://jsfiddle.net/3ty4gvda/3/

Upvotes: 1

Related Questions