Suppose you have this html:
<span> aaa </span> <a> bbb </a>
<br>
<span> ccccccc </span> <a> dddd </a>
You need the span to be of a certain width, so there is a certain layout.
How do you do this without resorting to floating divs?
You could style the spans to be display: block, or inline-block (IE sometimes has issues with this) and then define the width.
Why? Well, span is a inline elmenent, and you cannot define width and height on inline elements, so you must "convert" the span to a block element.
inline-block.
If you trying to create a table without a table check this example of definition list
Related
I am trying to keep my line of text from breaking in two using some code that is similar to this.
<h3>
<div class="home_widget">
<div class="home_widget_lc">join us</div>
on sundays</div>
</h3>
Using this code it is breaking between the "us" and "on." I want it all on one line.
The answer is to change the "home_widget_lc" div into a span.
(Of course you can change the display property of the div, but if you don't have a need for a block there, don't use a block element in the first place!)
Fix the markup: h3 is not allowed to have block-level children like div. Use span instead:
<h3>
<span class="home_widget">
<span class="home_widget_lc">join us</span>
on sundays</span>
</h3>
Or, unless you have some reason to wrap the content of h3 in a container, assign the class to the h3 element (this may imply that the CSS code needs to be simplified, too):
<h3 class="home_widget">
<span class="home_widget_lc">join us</span>
on sundays
</h3>
If you cannot change the markup, you need to hope that it will work reasonably despite the invalidity and to add CSS that more or less tries to turn the div elements to span elements, in the styling sense. In practice, it suffices to do that for the inner div:
.home_widget_lc { display: inline; }
Depending on whether the class name home_widget_lc is used elsewhere for other purposes, you may need to write a more specific selector to prevent the rule from having undesired effects on other elements, e.g.
h3 div.home_widget div.home_widget_lc { display: inline; }
Use -
div {display:inline;}
or -
div.home_widget_lc {display:inline;}
Fiddle - http://jsfiddle.net/Sa9W4/
You can also check this for more clarification - http://quirksmode.org/css/css2/display.html
This is because you have used separate div for join us
<div class="home_widget_lc">join us</div>
and div is block element which starts from next line. The alternative of overwriting this feature of block elements you can use display:inline with those elements.
if you don't need special class only for join us you do something like this
<div class="home_widget_lc">join us on sundays</div>
can you alter the HTML?
<h3>
join us on sundays
</h3>
All in one line.
By default <div> tags are set to display: block.
Either change the CSS:
.home_widget, .home_widget_lc {
display: inline;
}
or change the HTML:
<h3>
<span class="home_widget">
<span class="home_widget_lc">join us</span>
on sundays
</span>
</h3>
inline-block is not working for me here below.. no problem with block
<div class="delegacion" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
<h2>Delegación Madrid</h2>
<span itemprop="streeAddress" class="new-line">Calle Guetaria 110</span>
<span itemprop="postalCode">28041</span>
<span itemprop="addressLocality" class="new-line">Madrid</span>
<span itemprop="telephone" class="telephone new-line">
683 457 946
</span>
CSS:
span.new-line {
display: inline-block;
}
You would generally use inline-block when you want an element to behave like an inline element but be able to respect properties such as height, width, top & bottom padding and margins.
Since you aren't setting any of those, you won't see a difference between inline and inline-block
If you are trying to have the .new-line items each be on their own line, then you have to use block instead of inline-block.
See jsFiddle here: http://jsfiddle.net/25VQa/
The short answer is that you need to use block.
In my application I have tags that can be from 5 to 15 characters. By that reason the tags width differ, but the surrounding divs increases with the parents width, not the content.
What should I put in the CSS to make the divs width adapt to the width of it's content?
Thanks in advance!
HTML
<div class="tag">
<a href="#">
<span class="content">Test album</span>
</a>
X
</div>
CSS
div.tag {
background: red;
}
Test case: http://jsfiddle.net/T4XJ3/1/
The <div> element has display:block, so it will always take the full width of their container.
You can make them "flexible" by using display: inline-block (demo).
Is this what you're looking for?
inline-block to the rescue!
div.tag {
background: red;
display: inline-block;
}
From the w3c spec:
This value causes an element to generate an inline-level
block container. The inside of an inline-block is formatted as a
block box, and the element itself is formatted as an atomic
inline-level box.
In simpler terms this means that outside of your div it acts like a span would (sizes to fit contents, flows inline in content, etc.), and inside of your div it acts like a div normally would (for positioning, sizing, padding, etc.).
I have a div tag and in side that div tag there are 2 span tags.
one span tag will hold up to maximum of 10 span tags and i restrict that programtically.
the second span will hold a text box and a button.
when ever i enter some text in the text box i am showing it in the first span. now that I am facing some problems to get the span tag to the next line instead its getting over lapped with the right panel.
can some one please help me with this..
Note: My div or span has no CSS as of now.
<div>
<span>
<span>Sample text</span>
<span>Sample text</span>
<span>Sample text</span>
<span>Sample text</span>
</span>
<span><input type="text"><input type="button"></span>
</div>
The span tag is used to group inline-elements on a document, thus they are not block-level by nature. Just set the span tags to display as inline-block and that should fix the problem.
CSS
span {
display:inline-block;
}
Also, if you're looking to displace the span tags so they can hold a line each as block elements do just set them to display:block;, but if thats the case it would be cleaner to just set them as div's instead of span's.
I am trying to create a combobox style widget (jquery-ui compatible) andcurrently I am trying to get the static layout of the box sorted. The problem is when I have long text in the value area of the select it doesn't clip in Firefox (it actually wraps). I don't want this and tried various combinations overflow:hidden white-space:nowrap etc but in Firefox it still wraps. The sample code is below.
<a href="#" class="ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style="padding-left:5px;text-decoration: none; width: 139px; ">
<span style="float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class="ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span>
<span style="line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span>
</a>
Can anyone offer any help on this?
Try giving the element a display:block, or change the SPAN to a block-level element like DIV.
The problem is spans are inline elements, and you can't set width or height on inline elements.
And as overflow controls are based on block dimensions It won't work.
However, as of Firefox 3.0, there is support for
display: inline-block
Which allows you to control the element as if it were a block, but to the containing scope it still behaves like an inline element.