CODEWITHSUNDEEP
htmlcssjquery-mobile
Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27256

Placing divs side by side inside a grid

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:

enter image description here

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;
 }

Upvotes: 1

Views: 1235

Answers (2)

mohamedrias
mohamedrias

Reputation: 18576

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

enter image description here

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;
    }

enter image description here

JSBIN

Upvotes: 2

APAD1
APAD1

Reputation: 13666

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

Upvotes: 1

Related Questions