Logo and text next to it at the bottom

Question

I want to make a header where i have a logo positioned left and text next to that logo (on the right side of the logo) but i want the text to appear at the bottom of the image not at the top. How would i achieve that?

I tried with making the header div relative and the slogan div absolute but then the text is written over the image...

my html:

<html>
<head>
<title>test</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container header">
<div class="logo">
    <img src="images/logo.png" alt="Logo" class="img-responsive">
</div>
<div class="slogan">
Lorem ipsum lorem ipsum
</div>

</div>

</body>


</html>

and css:

 body{
        maring:0 auto;
    }

    .logo{
        float:left;
    }

    .slogan{
        float:left;
    }

Here is a image of what i want to achieve:

Possible duplicate of [Vertically align text to the bottom of the box?](http://stackoverflow.com/questions/10760088/vertically-align-text-to-the-bottom-of-the-box) — Dexter0015, Jan 03 '17 at 16:00
Yep, and it's pretty much the same. The only difference is the logo which should not be a problem: https://jsfiddle.net/dLrndyyh/ — Dexter0015, Jan 03 '17 at 16:39

score 1 · Answer 1 · answered Jan 03 '17 at 15:38

1

Easiest option is to give your slogan a top margin:

.slogan{
    float:left;
    margin-top: 4px;
}

answered Jan 03 '17 at 15:38

Serg Chernata

12,280
6
32
50

margins are not good for responsive design... so not really something i can do – mheonyae Jan 03 '17 at 16:04
@mheonyae I'm actually genuinely curious why you think that is the case? Do you have a reference? – Serg Chernata Jan 03 '17 at 16:07
you realize that on different screen the image is different size? means the margin has to be different as well to get what i want to achieve – mheonyae Jan 03 '17 at 16:08
@mheonyae ah, and you can't use em or %? – Serg Chernata Jan 03 '17 at 16:10

score 1 · Accepted Answer · answered Jan 03 '17 at 16:26

If you wish for dynamic resizing let me suggest a flexbox alternative:

body {
  margin: 0 auto;
}
.logo {
  float: left;
}
.slogan {
  /* float: left; */
  align-self: flex-end;
}
.header {
  display: flex;
  flex-flow: row wrap;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container header">
  <div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=100×100&w=100&h=100" alt="Logo" class="img-responsive">
  </div>
  <div class="slogan">
    Lorem ipsum lorem ipsum
  </div>
</div>

Logo and text next to it at the bottom

2 Answers2