Placing divs side by side inside a grid

Question

Am trying to place (align) two divs (one containing an image, and the other a list) side by side inside a grid,but the result am getting isn't exactly what i want.

This is the result i get:

when i use this code:

<div data-role="content">
    <div class="ui-grid-a" style="border:1px solid black">
        <div class="ui-block-a"><div id="profile_photo"><img id="avatar" src="images/Free.jpg" width="400" height="400"></div></div>
        <div class="ui-block-b">
            <ul data-role="listview">
                <li><a href="#">Name name</a></li>
                <li><a href="#">Occupation</a></li>
                <li><a href="#">Location</a></li>
            </ul>
        </div>
    </div>

As you can see, the list is positioned on the far right corner. I want it to start where the border of the image ends. What changes do i need to make to this? Is it even possible using this attempt?

Update: This is the only css code am using (yes, i know it's almost nothing)

.ui-block-a,
.ui-block-b,
.ui-block-c
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
 }

Answer 1

Jquery Mobile is applying 50% width to ui-grid-a & ui-grid-b, Because of that the entire width is divided into two sections of equal width.

.ui-grid-a > .ui-block-a, .ui-grid-a > .ui-block-b {
   width: 50%;
}

As a result of that, you right div with menu is looking to be right aligned.

If you want to override that, then add

float: left;  width: auto !important;

to your css as follows:

.ui-block-a,
.ui-block-b,
.ui-block-c
{
background-color: lightgray;
border: 1px solid black;
height: 500px;
font-weight: bold;
text-align: center;
padding: 30px;
float: left;
width: auto !important;
 }

Now your image and div will be properly aligned

JSBIN DEMO

But doing this may affect the css in other places where you will be using .ui-grid-* blocks.

Better instead of wrapping the content inside those grid blocks, wrap them inside a custom div and add your CSS which will be specific to your case

<div data-role="content">
    <div class="ui-grid-a" style="border:1px solid black">
        <div class="blockdiv">
          <div id="profile_photo"><img id="avatar" src="http://www.picturesnew.com/media/images/images-photo.jpg" width="400" ></div></div>
        <div class="blockdiv">
            <ul data-role="listview">
                <li><a href="#">Name name</a></li>
                <li><a href="#">Occupation</a></li>
                <li><a href="#">Location</a></li>
            </ul>
        </div>
    </div>

CSS:

    .blockdiv {
       width: auto !important;
       float: left;
       padding-top: 10px;
       margin-right: 20px !important;
    }

JSBIN

Answer 2

This should get you on the right track, basically you just need to override the jQuery mobile CSS that is applying a width to those blocks of content:

HTML:

<div data-role="content">
    <div class="ui-grid-a" style="border:1px solid black">
        <div class="ui-block-a">
            <div id="profile_photo">
                <img id="avatar" src="http://www.fillmurray.com/400/400" width="400" height="400" />
            </div>
        </div>
        <div class="ui-block-b">
            <ul data-role="listview">
                <li><a href="#">Name name</a></li>
                <li><a href="#">Occupation</a></li>
                <li><a href="#">Location</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

.ui-block-a, .ui-block-b, .ui-block-c {
    background-color: lightgray;
    border: 1px solid black;
    height: 400px;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.ui-grid-a>.ui-block-a {
    width:400px;
}
img {
    float:left
}
li {
    list-style-type:none;
}

JSFiddle