CODEWITHSUNDEEP
css
Baper
Baper

Reputation: 1543

Putting two <div> side by side

I want to put two side by side on another (I have three ) this is my code:

<div class=Mheader >
<div class=theader>
Meine Route !
</div>
<div class=imgcss>
 <img src="Images/Route1.png" width=600 height=100 />
</div>

but the image always goes under the text .how can I solve this problem? my CSS is:

.Mheader
{
    font-family: 'Trebuchet MS';
    font-size: larger;
    font-weight: bold;
    font-style: italic;
    text-transform: capitalize;
    color: #FFFFFF;
    background-color: #008800;
    width: auto;
    height: 100px;
}
.theader
{
    font-family: 'Franklin Gothic Demi';
    font-size: xx-large;
    font-weight: bold;
    font-style: italic;
    line-height: normal;
    width: 250px;
    text-align: left;
    height: 100px;
}
.imgcss
{
    text-align: right;
    width: 600px;
}

Upvotes: 0

Views: 1893

Answers (4)

user920041
user920041

Reputation:

I assume that you want the green header to span across screen, and that the image/logo should float on right-hand side inside this header. To achieve this:

  1. Close the .Mheader. with the missing </div>
  2. Add float: left to the .theaeder. Keep the width: auto
  3. Add float: right to the .imgcss

See a demo here:

http://jsfiddle.net/mtbwD/

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

just float: left both .theader and .imgcss element and be sure that parent element is at least 850px large (600px+250px)

.imgcss, .theader{
    ...
    float    : left;
}

.Mheader {
    ...
    min-width : 850px;
}

Upvotes: 1

sandeep
sandeep

Reputation: 92863

Give float to them . Write like this:

.imgcss,
.theader{
 float:left;
}

Upvotes: 1

U.P
U.P

Reputation: 7442

You have to use float:left; in .theader and .imgcss classes

Upvotes: 2

Related Questions