attached is an image.
I am trying to get the text format as shown at the right-most end. i.e. within the height of the thumbnail (36px) name, time, date have to be shown vertically aligned. I am having problem showing the text vertically aligned. Here's my code -
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div id='name' style="float:right; font-size:11px">Peter</div>
<div id='time' style="float:right;font-size:11px;">19:23</div>
<div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
</div>
</div>
To be accurate, I want the div ids 'name', 'time', 'date' to be aligned like in the image. how?
Also note that the div with id="0" is one of the results, there'll be 10 such in a page all under <div id="sresults">
Here's what you want: http://www.bravegnuworld.com/rjune/test.html
Notice encapsulating the name, etc in a div that is floated right? You have three divs(block elements, they'll automatically stack). Put those inside another div, and you now have a block element with three stacked blocks inside it. You can either use "float:right" or "display:inline-block" to make the div display on the same level. as the rest of the line.
<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
<div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right; background:green">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div style="float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
You can use table instead of div it's seems more logical to me:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<table id="meta0" style="float:right;">
<tr>
<td>
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
</td>
<td style="text-align:right;">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</td>
</tr>
</table>
</div>
</div>
UPD
Here is code with divs:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
<div style="text-align:right; float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
</div>
Related
I want to have these 3 gifs in a row, each taking up a third of the width of the page. but when I look at the page, they are tiny. I set the divs to 32% each and the gifs should take up 100% of their div.
this is my code:
<div id="3wizards" width=100% style= "float:center">
<div id="w1" width=32% style="float:left">
<img src="wizard(1).gif" width=100%>
</div>
<div id="w2" width=32% style="float:left">
<img src="wizard(1).gif" width=100%>
</div>
<div id="w3" width=32% style="float:right">
<img src="wizard(1).gif" width=100%>
</div>
</div>
what the page looks like:
Image of the page, the three wizard gifs are tiny.
(I understand that I could just remove the difs, but what if I want to have text in one of the thirds in the future? I'm pretty sure need the difs for that, so I want to get it to work with the divs now so I can use it in the future.)
Hi Anura have a look at the below code.
First, wrap the code with the main wrapper and use the flex to align in the same row.
<div class="gif-wrapper">
<div id="w1" class="gif">
<img src="wizard(1).gif" width=100%>
</div>
<div id="w2" class="gif">
<img src="wizard(1).gif" width=100%>
</div>
<div id="w3" class="gif">
<img src="wizard(1).gif" width=100%>
</div>
</div>
CSS:
.gif-wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.gif-wrapper .gif {
width: calc(100% / 3 - 30px);
margin: 0 15px;
}
Use media query for responsive devices
Use flex for fix that:
<div id="3wizards" width=100% style="display: flex;gap:2%;">
<div id="w1" width=32% height=100%>
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
</div>
<div id="w2" width=32%>
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
</div>
<div id="w3" width=32%>
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
</div>
</div>
I'm trying to place icon next to text using span but the images are not flush with the text that is beside them. They are moved up. I'm wondering if anyone knows why it is displayed this way and how to fix it. Thanks you.
<div class="search" id="search">
<input type="search" placeholder="What can we help you find today?"><span>
<img src="search.png" width="20" height="20"></span>
</div>
<div class="customer" id="customer">
<div class="My Account">
<p>My Account<span><img src="user.png" width="23" height="23"></span>
</p>
</div>
<div class="cart">
<span>Cart |</span><span>0</span><span>items</span><span>
<img src="cart.png" width="23" height="auto"></span>
</div>
</div>
Because the default vertical alignment for inline elements is baseline. Set the alignment on your images to middle> Also be sure to remove any white space in your code that would be between those elements as browsers are sensitive to it:
img {
vertical-align: middle;
}
img {
vertical-align: middle;
}
<div class="search" id="search">
<input type="search" placeholder="What can we help you find today?"><span><img src="search.png" width="20" height="20"></span>
</div>
<div class="customer" id="customer">
<div class="My Account">
<p>My Account<span><img src="user.png" width="23" height="23"></span>
</p>
</div>
<div class="cart">
<span>Cart |</span><span>0</span><span>items</span><span><img src="cart.png" width="23" height="auto"></span>
</div>
</div>
I want the elements to be side by side and not on top of one another.
When I say best way, I want the elements to not overlap when you change the size of the screen.
Here is my HTML:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
<h1>2</h1>
<img src="media/github.png" alt="GitHub" height="150" width="150">
</div>
</div>
Here is a picture of what it looks like:
Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="row">
<div class="col-xs-6">
<h1>1</h1>
<img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
</div>
<div class="col-xs-6">
<h1>2</h1>
<img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
</div>
<div class="clearfix"></div>
</div>
</div>
Bootply
Using the Grid system to scale up to 12 columns, as described here
<div class="row">
<div class="col-md-4">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
</div>
<div class="col-md-4">
<h1>2</h1</div>
<div class="col-md-4">
<img src="media/github.png" alt="GitHub" height="150" width="150
</div>
You can change the size of the columns by increasing/decreasing col-md-4
If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.
For example, this is how to code 2 images:
<div class="row">
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
</div
The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css
.container-fluid div > * {
margin: 0 auto;
display: inline;
}
It seems it'd work. I don't know why... My description is too far over.
HTML
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:right"> <strong>Description:</strong></div>
<br />
now I understand.
Try to do this:
<div id="viewPhoto">
<div id="viewThumb" style="float: left">
<img src="http://images.br.sftcdn.net/br/scrn/73000/73753/santos-5.jpg" />
</div>
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
<div class="moderPanel" style="float:left; border:1px solid green; clear: left">
$MODER_PANEL$
</div>
Because you are putting the div in a float right way.
Try do to left using margin left. Like this:
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
It's because your float:right CSS statement is causing ithe description to float to the right of your container element. Try using float:left together with a small margin like this:
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:left; margin-left:15px;"> <strong>Description:</strong></div>
<br />
...
For some kind of menu I would like a box of 300 pixels width, with the items in it aligned to the right. I came up with the following code which works just fine in IE and Chrome, but not in FF :
<div style="width:300px;" align="left">
<div align="right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
UPDATE : In FF, the images are on the right side of the screen, in stead of aligned right at 300px from the left.
UPDATE 2 : The solution appeared to be text-align...
OK, after a lot of trying out things, I found it myself : text-align does the trick
(although it's aligning images here)
<div style="width:300px; text-align:right;">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
Try that:
<div style="width: 300px;">
<div style="float: right;">
<img src='images/item1.png' />
</div>
</div>
Oh and also, don't use HTML align parameters, use style.
Try using this instead:
<div style="width=300px;">
<div style="float: right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
try this width : not width =
<div style="width:300px;">
<div style="float: right">
<img src="images/item1.png">
<br />
<img src="images/item2.png">
<br />
<img src="images/item3.png">
<br />
<img src="images/item4.png">
<br />
</div>
</div>
<div style="width:300px;">
<div style="float:right">
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
</div>
</div>