I am having code like this
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%">2</span>
</div>
currently it is showing like this.
here padding right is not working. it should be such that 2 should be having 10% padded from right of this div.
Is there any other style tag which can do give such padding from right.
by default, inline elements are rendered left to right aligned, unless you specify float property for them.
That means, in a given horizontal line, first span T1 will be rendered adjacent to the left border of the parent and then span 2 will be rendered adjacent to span T1.
so, your padding-right is never being utilized, as the last span is already far away from right border, unless you make it to move right either by float:right or giving it a margin
try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style=" float:right; padding-right:10%;">2</span>
</div>
see this fiddle
This will give the desired effect
<span style="float:right; margin-right:10%">2</span>
Use this:-
<span style="float:right; padding-right:10%">2</span>
Good explanation by above contributors, but you can also try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%;padding-left:60%">2</span>
</div>
Infact, this is about how you take the structure of your CSS, if we consider Left to Right precedence which Manish mentioned, we can also adjust our requirement by inserting a left padding of 60%.
So, this problem can be solved in both ways, if you want to adjust something in between "T1" and "2" you should use mine one, otherwise both are fine.
Hope you got it.
Related
I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:
With float: left
Without float: left
How can I align vertically cell's contents with float?
And markup looks like that
<td id="top_logo">
<a href="index.php">
<img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
</a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>
I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.
<div id="tableRow">
<div id="leftCell"><img src="mylogo" /></div>
<div id="middleCell"> </div>
<div id="rightCell">User Name Here</div>
</div>
Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:
#rightCell
{
height: 30px;
line-height: 30px;
}
What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.
Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:
display: block;
Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.
Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/
How can I put an <img> next to a <div> so the image vertically aligns in the middle?
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
I know how to do it using a table:
<table style="font:10pt Arial">
<tr>
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
</tr>
</table>
But I wonder if I could do it without a table.
Thanks in advance!
Rain Lover
To be honest from your example I have a feeling you may be taking slightly the wrong approach for this.
Personally I would attach this icon to the div as a CSS background-image. Afterwards, you could apply padding to the left of the div equal to the width of the image (plus a few more pixels for spacing). Then, you will be able to use background-position to do something like this:
background-position:0px center;
This will give you the higher degree of control that I think you're after.
With block elements such as img and div, you cannot position them vertically in the centre of something without actually having a something (element) to vertically centre them inside of.
Having said that it is still not possible aside from using some sort of hack. The far simpler method would be to use a relative position on one of the elements and offset its position such that it visually creates the same effect, or use a margin/padding to do the same.
It can be done the following way. There is no easy way to center unless you have it inside an element with a specific height and can be played with. This can be viewed at http://jsfiddle.net/jawilliams346614/CvpUB/1/
<div>
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;">
<div style="font:10pt Arial;padding:5px;background-color:#ccc;">
<span style="float:right">No. 1</span>
<span style="font-weight:bold;padding-right:10px;float:left;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>
now if you increase your font size, you will have to change padding to:
padding-top: 5px; // change in sync with bottom to center in text
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks
<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
<span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
<span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
<span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>
Why just add all span height: 100%; and top div height: auto;?
BTW, I am pretty sure that span with display:block; is div .
BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...
<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>
the only prob is that container have to have set height.
Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;
Can I use any tag that will allow me to place a line <hr /> on a specific left margin size
Have you tried:
<hr style="margin-left:10px;" />
I would prefer to use a div and add a border to that div. It's more flexible than the tag. This would be a example for a solid line with a margin of 5 px to the top and bottom and 10px to the left and right:
<div style="border-top:1px solid #000;margin:5px 10px;"></div>
I haven't tested it but that should work fine :)
edit: i tested it with firebug and edited the code above.