CODEWITHSUNDEEP
htmlcss
theOGloc
theOGloc

Reputation: 241

Place a div in bottom right corner inside a column

I'm trying to align a div at the bottom right corner inside a specific column, but all instead it aligns at the bottom right corner of the main parent.

https://jsfiddle.net/jonnijonnason/L9vg468g/

If you check the fiddle, I want it to align beneath the image.

HTML

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Arbetsprov | Baldvin Haraldsson</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>

<body>
    <div class="page">
        <div class="row">
            <div class="item">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>

            </div>
            <div class="item">
                <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
            </div>
            <div class="item">
                <H3>Image</H3>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />

Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet. 
                <div class = "foo">Read More</div>

            </div>
        </div>
    </div>
</body>

</html>

CSS

@charset "UTF-8";
.item {
    width: 33%;
    background: rgba(0, 0, 0, 0.1);
    display: table-cell;
}

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px;
}

.page {
    max-width: 900px;
    margin: 0px auto 0px auto;
    position: relative;
    background-color: #fff;
}

img {
    float: right;
    margin: 0 0 10px 10px;
    padding: 10px;
}

.foo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    color: #fff;
    text-align: center;
vertical-align: middle;
line-height: 50px; 
    background-color: #4a4a4a;
    height: 50px;
    width: 162px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Upvotes: 0

Views: 128

Answers (3)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16814

Add to <div class="item"> column a position:relative;

The button inside has an absolute position so it is relative to the next parent element with relative (or absolute) positioning.

Also, to make it not overlap the text you can also set padding-bottom

.item.contains-button {
  position:relative;
  padding-bottom:60px;
}

Your updated JSFiddle

Upvotes: 1

San
San

Reputation: 279

As you have placed other two columns description inside paragraph tag, you can keep third description also inside a paragraph and it can be achievable by using css flexbox if your browser support is IE10 +.

Updated code below.

.item {
    width: 33%;
    background: rgba(0, 0, 0, 0.1);
    display: table-cell;
    display: flex;
    flex-direction: column;
}

.row {
    border: 1px solid red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-spacing: 20px;
}

.page {
    max-width: 900px;
    margin: 0px auto 0px auto;
    position: relative;
    background-color: #fff;
}

img {
    float: right;
    margin: 0 0 10px 10px;
    padding: 10px;
}

.foo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    color: #fff;
    text-align: center;
vertical-align: middle;
line-height: 50px; 
    background-color: #4a4a4a;
    height: 50px;
    width: 162px;
    position: relative;
    bottom: 0;
    right: 0;
}
.item h3 {
	order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Arbetsprov | Baldvin Haraldsson</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>

<body>
    <div class="page">
        <div class="row">
            <div class="item">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
                
            </div>
            <div class="item">
                <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
            </div>
            <div class="item lastcol">
                <H3>Image</H3>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
                
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p> 
                <div class = "foo">Read More</div>

            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 0

Alok Patel
Alok Patel

Reputation: 8022

What you need to do is just add Position: relative; to the last column. This will make Read more div to be at bottom right corner of the direct parent DIV instead of the main DIV.

Updated jsFiddle: https://jsfiddle.net/L9vg468g/4/

HTML:

<body>
    <div class="page">
        <div class="row">
            <div class="item">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>

            </div>
            <div class="item">
                <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
            </div>
            <div class="item lastcol">
                <H3>Image</H3>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />

Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet. 
                <div class = "foo">Read More</div>

            </div>
        </div>
    </div>
</body>

CSS:

@charset "UTF-8";
.item {
    width: 33%;
    background: rgba(0, 0, 0, 0.1);
    display: table-cell;
    position: relative;
}
.item.lastcol {
  position: relative;
}
.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px;
}

.page {
    max-width: 900px;
    margin: 0px auto 0px auto;
    position: relative;
    background-color: #fff;
}

img {
    float: right;
    margin: 0 0 10px 10px;
    padding: 10px;
}

.foo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    color: #fff;
    text-align: center;
vertical-align: middle;
line-height: 50px; 
    background-color: #4a4a4a;
    height: 50px;
    width: 162px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Upvotes: 0

Related Questions