<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/
Related
http://jsfiddle.net/1351qL91/
<div style="width:200px">
<span style="float:left">left</span>
<span style="float:right">right</span>
<br/>
<div style="position:relative">
<span style="float:left">left</span>
<span style="float:right">right</span>
<div>
<br/>
<div style="position:fixed">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
spans with float right won't float right inside a div with position fixed.
I came to the conclusion that float won't work if the container's width is
unknown, and in this case the width is indeed unknown.
So another question which may solve this problem is how to set a fixed position child to 100% width of it's parent?
P.S I'm using bootstrap 3, which means the container div (which I set to 200px) is actually of class col-md-3 -> I don't know the width of the container, that's why I need it to be dynamic
Floating wont work inside fixed or absolute divs unless you specify width.
You cannot use position:fixed to position inside the bootstrap grid. Fixed positioned divs are relative to the browser. You need to use absolute positioning.
How you want to float a div inside another if you don't have a width? You can use with %:
<div style="position:fixed; border:solid 1px #c1c1c1; width: 100%;">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
Or, you can define a width to the div's inside:
<div style="position:fixed; border:solid 1px #c1c1c1;">
<span style="float:left; width:150px;">left</span>
<span style="float:right; width:150px;">right</span>
</div>
A fixed position element is positioned relative to the viewport, or the browser window itself.so when you give width:100% it takes up all the space in your viewport.
If you are using jquery there are plugins available that can be used to create a fixed postion side bar.
Examples:
http://www.berriart.com/sidr/#getstarted
http://spoiledmilk.com/blog/sticky-sidebar/
A JQuery solution i used for this problem:
-Modified html
<div id="firstDiv style="width:200px">
<span style="float:left">left</span>
<span style="float:right">right</span>
<br/>
<div style="position:relative">
<span style="float:left">left</span>
<span style="float:right">right</span>
<div>
<br/>
<div id="fixed" style="position:fixed">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
-JQuery code:
$(document).ready(function ()
{
$('#fixed').width($('#firstDiv').width());
});
$( window ).resize(function()
{
$('#fixed').width($('#firstDiv').width());
});
And here your changed JSFiddle
I'm having a hell of a time aligning two jquery-ui icons and text in the middle of the line in a header. (code blow). Can anyone assist pretty pleeeeease?
<div class="ui-widget-header">
<span class="ui-icon ui-icon-close"></span><span class="ui-icon ui-icon-wrench"></span>Text
</div>
I'm not perfectly clear on what you are wanting as an output.
If you are trying to get the icons and the text to all appear on one line, you do that by creating a new CSS class:
.ui-icon.inline { display:inline-block; }
.ui-widget-header.center { text-align:center; }
And then adding that class to your icons:
<div class="ui-widget-header">
<span class="ui-icon inline ui-icon-close"></span>
<span class="ui-icon inline ui-icon-wrench"></span>
Text
</div>
If you want them to then be horizontally centered in the div you could then change the div to:
<div class="ui-widget-header center">
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>
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me
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>