CODEWITHSUNDEEP
htmlcss
user1765862
user1765862

Reputation: 14205

two divs on the same line

I'm trying to use jquery mobile. Inside my page-header I want to put two divs one accross another (on the same line) left one would contain background image and right some button. So I tried

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px; style="float:left;"> LEFT </div>
<div class="ui-block-b" style="float:right;>
    <a href="" data-role="button" data-theme="d">button on the right </a>
</div>

but button always shown down.

Upvotes: 0

Views: 147

Answers (2)

Zahoor
Zahoor

Reputation: 48

It is because you are setting the width of first div to 100% and there is also typo,try this 

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:50%;height:50px;float:left;"> LEFT </div>
    <div class="ui-block-b" style="float:left;>
        <a href="" data-role="button" data-theme="d">button on the right </a>
    </div>

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10190

First, you have some typos in your markup:

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px; style="float:left;"> LEFT </div>

Should be:

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px;float:left;"> LEFT </div>

You are also missing a closing parenthesis on the style portion of your second div.

Second, you have your background image size set to 100%, meaning it's going to take up 100% of the width, leaving no room left for your other div element. Reduce the width of the first div and the second will fall into place.

Here is a fiddle: http://jsfiddle.net/2xs24/

Upvotes: 3

Related Questions