CODEWITHSUNDEEP
htmlcss
Mulgard
Mulgard

Reputation: 10589

Aligning divs underneath each other

I have this html:

<div id="container" class="container">

    <div id="menu-top">
        <div class="top-menu">
             <div class="top-menu-buttons">
                <button class="button button-icon ion-minus-circled"></button>
                <span>{{amount}}</span>
                <button class="button button-icon ion-plus-circled"></button>
            </div>
        </div>
    </div>

    <div id="classic" class="classic">
        <div id="classic-img" class="classic-img">
            <img ng-src="{{image.filtered}}" />
        </div>
    </div>

    <div id="menu-bottom">
        <div class="bottom-menu">
            <div class="bottom-menu-buttons">
                <button class="button button-icon ion-eye"></button>
                <button class="button button-icon ion-refresh"></button>
                <button class="button button-icon ion-crop"></button>
                <button class="button button-icon ion-android-options"></button>
                <button class="button button-icon ion-social-tumblr"></button>
            </div>
        </div>
    </div>

</div>

And this css:

.container {
    width: 100%;
}

.classic {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/postcard_00.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.classic-img {
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 6%;
    left: 5%;
}

.classic img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.top-menu {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: red;
}

.top-menu-buttons {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    text-align: center;
}

.top-menu-buttons .button {
    display: inline-block;
    vertical-align: middle;
    font-size: 25px;
    color: white;
}

.top-menu-buttons span {
    display: inline-block;
    vertical-align: middle;
    font-size: 25px;
    color: white;
}

.bottom-menu {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: green;
}

.bottom-menu-buttons {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    text-align: center;
}

.bottom-menu-buttons .button {
    display: inline-block;
    vertical-align: middle;
    font-size: 35px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

The result i want to have:

enter image description here

The result i got from above code:

enter image description here

My css is designed so that the blue content is under the red (top menu) and the green (bottom menu) is under the blue content. I cant find the mistake i made.

Upvotes: 0

Views: 61

Answers (3)

Lal
Lal

Reputation: 14810

See this fiddle

position:absolute was the culprit.

You have to remove that from .classic-img and .classic-img img. Also, remove height: 100%; from .classic-img img. So the changed CSS would be as below

.classic-img {
    display: block;
    /* position: absolute; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 6%;
    left: 5%;
}

.classic-img img {
    /* position: absolute; */
    width: 100%;
    /* height: 100%; */
    top: 0;
    left: 0;
}

Upvotes: 2

slashsharp
slashsharp

Reputation: 2833

I'm not sure why you need an absolute position for both the image & the image container, if that is really necessary, you need to give the parent #classic a height.

Or you can remove the absolute positioning for the image & the image container like this

Or if you want the image to be fluid, just set it width to 100% instead of absolute positioning

.classic-img img {
 width: 100%;
}

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 1358

Try to give style rule position:absolute and bottom:0 to the .bottom-menu element. This will bring the .bottom menu at the bottom of page. This will hopefully work for you.

Upvotes: 0

Related Questions