CODEWITHSUNDEEP
htmlcss
John R
John R

Reputation: 257

Aligning two elements to the bottom inside a column

I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?

enter image description here

.wrapper {
  position:relative;
  text-align:center;
  margin:0 auto;
}

.footer {
  font-size:40px;
  color:black;
}
.talk {
  position:absolute;
  text-align:left;
  bottom:0;
}

.footer-logo {
  vertical-align: bottom;
  float:right;
  height:150px !important;
}
 <div class="wrapper">
    <p class="footer talk">Big Text</p>
    <img class="footer-logo" src='http://via.placeholder.com/140x100'>
 </div>

Upvotes: 0

Views: 46

Answers (2)

Kasunjith Bimal
Kasunjith Bimal

Reputation: 188

You can try This Code. I'am add some media queries and some div to in html page

Html

<div class="wrapper">
   One Columns
 </div>
 <div class="wrapper">
    two Columns
 </div>
  <div class="wrapper">
    three Columns
 </div>
  <div class="wrapper">
  <div class="A">
   <p class="footer talk">Big Text</p>
    <img class="footer-logo" src='http://via.placeholder.com/140x100'>
  </div>

 </div>

CSS

.wrapper {
  position:relative;
  text-align:center;
  margin:0 auto;
width:25%;
float:left;
}

.footer {
  font-size:40px;
  color:black;
}
.talk {
  position:absolute;
  text-align:left;
  width:50%;
  float:left;
}

.footer-logo {
  vertical-align: bottom;
  float:right;
  height:150px !important;
  width:50%;
  float:right;
}

.A{
  width:100%;
}

@media (max-width:525px){
.A{
  width:100%;
}

.footer-logo {

  width:20%;
  float:right;
}

.talk {

width:20%;
float:left;
font-size:28px;
}
}

Upvotes: 0

Alireza Kavian
Alireza Kavian

Reputation: 383

you can simply set the display of 'image' and the 'text' element to :inline

or chage the < p > tag to < span >,

because < p > tag takes the whole line and they couldn't take place together!

but < span > tag is an inline element which takes the content width (and not the screen width)

here is a useful explanation about "display" property.

.wrapper {
    display: block;
    position:absolute;
    right:0;
    bottom:0;
    text-align:center;
    margin:0 auto;
}

.footer {
    display: inline;
}

.talk{
    font-size:40px;
    color:black;
}
.logo{
    height: 150px;
    width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrapper">
    <span class="footer talk">Big Text</span>
    <img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>

</body>
</html>

Upvotes: 1

Related Questions