CODEWITHSUNDEEP
htmlcssimage
Kobaine
Kobaine

Reputation: 65

Float image left, float text right and align at bottom?

I basically have three elements on two rows- a logo (image 350px wide by 150px tall)and a text heading in the first row, and then a navigation bar on the next. What I am trying to do is make the text align with the bottom of the image, while having the image in the far left and the text on the far right. I was able to get it in the right position by using position: relative & position: absolute, but since I am trying to make the website responsive when it shrinks down the text and logo overlap and it breaks. Any help would be greatly appreciated! This is what I am trying to make-->>>

------------------------------------------------------
logo x x x
logo x x x
logo x x x                                  text here
------------------------------------------------------
     navigation bar navigation bar navigation bar

Upvotes: 1

Views: 3677

Answers (1)

matsko
matsko

Reputation: 22183

You can easily achieve this using inline-block using CSS. Just wrap everything inside one parent element.

.container-element {
  /* some fixed width */
  width:1000px;
}

.image-element,
.text-element {
  display:inline-block;
  vertical-align:bottom;
}

.image-element {
  width:600px;
}

.text-element {
  text-align:right;
  width:400px;
}

.nav-element {
  display:block;
  text-align:center;
}

And your HTML:

<div class="container-element">
  <div class="image-element">
    <img src="..." />
  </div>
  <div class="text-element">
    ...
  </div>
  <div class="nav-element">
    ...
  </div>
</div>

Upvotes: 2

Related Questions