CODEWITHSUNDEEP
htmlcss
Kratalin Jan
Kratalin Jan

Reputation: 105

css left right simple menu

I want to have something like this:

================================
====IMAGE==============TEXT=====
================================

and I used:

.menu {
    background-color: red;
    padding: 40px;
    text-align: right;
}
.menu img {
    float: left;
}

Result:

================================
=======================TEXT=====
====IMAGE=======================

How can I do this?

Upvotes: 1

Views: 187

Answers (3)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Elements are not getting exact float and width property.

.menu {
  background-color: red;
  padding: 40px;
  float: right;
  max-width: 40%;
}
.menu img {
  float: left;
  max-width: 60%;
}

Now try to wrap them and use 

.wrapper {
   display: inline-block;
}

Upvotes: 0

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

I think that you have to use line-height with height in your text and set a width to your menu, something like:

<div class="menu">
   <div class="img">
      <img src="http://placehold.it/350x50" />
   </div>
   <div class="text">
      <p>your text</p>
   </div>
</div>

.menu {
    background-color: red;
    text-align: right;
    width:100%;
}
.menu img {
    float: left;
}

.menu text {
    float: left;
}

.text p{
    height:50px;
    line-height:50px;
}

DEMO

Upvotes: 1

Faust
Faust

Reputation: 15394

You would need the image to be first in the markup. Float will make inline items wrap around something, but only the inline items that come after it in the markup.

Upvotes: 1

Related Questions