Reputation: 27256
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;
}
Upvotes: 1
Views: 1235
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
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;
}
Upvotes: 2
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;
}
Upvotes: 1