I want to wrap two spans in one line with CSS.
Here is my code:
<div style="width:60px;">
<span id="span1" style="float:left; display:inline;"></span>
<span id="span2" style="float:left; display:inline; "></span>
</div>
But it doesn't work.
How to do that?
Edit:
I want to use the "id", either use div or span, I just want them to be in one line.
When I just use span without style, the content are not in the same line. The second line will go down.
Here is the working example:
<div style="float:left;">
<span style="display:inline; color: red;">First Span</span>
<span style="display:inline; color: blue;">Second Span</span>
</div>
The float will mess things up. Usually with a float to work you need a width with it as well. It can't float them against each other because it doesn't know how much space each span will occupy in relation to the div. Spans are inherently inline elements unless you define them otherwise, so they should just display that way without the float.
<div style="float:left;">
<span style="display:contents; color: red;">First Span</span>
<span style="display:contents; color: blue;">Second Span</span>
</div>
'display:contents' Makes the container disappear, making the child elements children of the element the next level up in the DOM which I believe is the right answer.
Another way which works on ie too is this:
<div style="float:left; display:flex;">
<span style="color: red;">First Span</span>
<span style="color: blue;">Second Span</span>
</div>
In some cases display:inline does not work, in such case try adding both spans in one parent span like below
<span>
<span id="span1">Span 1</span>
<span id="span2">Span 2</span>
</span>
It's the float left that is causing it to be on separate lines. Maybe try a (non breaking space) in between the spans.
Overflow maybe?
<div style="width:60px; overflow:hidden;">
The float and display styles are mutually exclusive, so there's no point using them together. Also <span> defaults to display:inline; so that's redundant anyway (unless you have some other style elsewhere setting them to something else?).
You can use Table.
<table>
<tbody>
<tr>
<td><span>Span 1 text</span></td>
<td><span>Span 2 text</span></td>
</tr>
<tr>
<td><span>Span 3 text</span></td>
<td><span>Span 4 text</span></td>
</tr>
</tbody>
</table>
Related
I have a list of span elements inside a div:
<div id="mediaListHolder">
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
</div>
I would like to place numbers in front of span items like it was an ordered list.
Here is the fiddle:
http://jsfiddle.net/nqq3c/2/
Is it possible?
Thank you!
a Div inside a span is not legit HTML. Block elements do not go inside of inline elements.
You can, however set the span to display:list-item -- you'd also need to use list-style-type attribute as described here
Note, I've not actually done this, but it's what would need to happen providing the browser allows it.
What I'd expect from the HTML below is that I'd see woo1 and woo2 overlapping while hiiii remains in its own cell away from the woos. However, everything runs together. Why?
http://jsfiddle.net/T4Jgx/
<table>
<tr>
<td style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</td>
<td>
<span>hiiii</span>
</td>
</tr>
</table>
Edit: Weird. When I remove the style from woo2, it appears to work. When I remove it from woo1, woo2 overlaps hiiii. Da fu...?
Edit2: For Reconstruct, your comment has to do with tables, so how come the exact same effect can be reproduced with this?
<div>
<span style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</span>
<span>hiiii</span>
</div>
Edit3: Arrghh... I believe I understand what is happening. By adding absolute positioning to the two spans, they are removed from the control flow and the first TD is collapsed. I am thinking about deleting this question, but maybe someone can just confirm what I just said and get the answer?
Wrap your TD content in a DIV and transfer position:relative to that.
<td>
<div style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</div>
</td>
I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV.
You can see my problem in jsfiddle.
Can you please help me solve this?
I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it.
Basically I want to text to look normal inside the DIV.
<div class="container-right">
<div class="topul" style="background-color:#2ecc71; width:352px;"></div>
<div class="parent" style="min-width:350px; width:350px; height:445px;">
<p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>
</p>
<div class="topul2" style="float:left; background-color:#2ecc71;"></div>
<div class="d-table">
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Name:
<p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71"><b>Some name</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71;">Address:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Other info:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
</p>
</div>
</div>
</div>
</div>
</div>
You can see the CSS in the jsfiddle link above.
I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this.
Please help.
Thanks
The problem is with your .myp4 styles
To avoid the overlap remove height: 2px;
To avoid bleeding from the div set max-width: 200px;
As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height
NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements
Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.
Try setting min-height instead of height on the rows and/or cells.
The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table {
width: 350px;
}
I want to use span inside div
div is used to put a red horizontal line
<div style="background-color:red;">
</div>
span is used inside div to put elements to right
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>
But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?
I'd suggest:
<div style="background-color:red; text-align:right;">ABC</div>
Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.
Cheers
Add overflow:auto to the div:
<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>
jsFiddle example
Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.
The float is not giving your div any height. You need to follow it up with a clear. Try this:
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
<div style="clear: both;"></div>
</div>
You need to add the property overflow:hidden; in your DIV.
Below I mentioned the Code:
<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>
<div class="ui-state-highlight ui-corner-all">
<span class="ui-icon ui-icon-info" style="float: left;margin-right: 0.3em;"></span>
<span class="spanHeading" style="float: left;display: inline">ADMISSION TYPE</span>
<span class="spanHeading" style="float: right">EXISTING ADMISSION TYPE</span>
<div>
i want to display span content inside div, but the Span Context display out of Highlight div.
Not a CSS expert, but I think you need to clear your floats. For most browsers, I think just setting an overflow property will work:
div.clear {
overflow:auto;
}
Example: http://jsfiddle.net/Xf2hq/