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.
Related
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.).
A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>
Now I have a span with its overflow hidden like so in HTML and CSS - I'm using it for the twitter post on this website: http://benjaminpotter.org/clients/c3carlingford/
HTML & inline CSS
<span style='width:686px; height:50%; display:block; white-space: nowrap; padding-top:14px; padding-left:10px; overflow:hidden;'></span>
Now I need to somehow detect when the div does overflow, and then when it does, allow the text to scroll through with jQuery or something similar.
Any idea how to do these two things?
You can do it by wrapping the overflowing span with a div element and have the div be overflown:
<div id="twitWrap" style="overflow:hidden;">
<span id="myTwitter">A new Twit appears</span>
</div>
This way when you add your new twit to the html you can check if the span element's width is larger than its parent element:
if( $("#twitWrap")[0].offsetWidth < $("#myTwitter")[0].offsetWidth) ) ...
And then apply any jquery code you would like.
you can accomplish some tricks like placing an ending element:
<span style="...">Tweet twweeeet ...
<span id="endd" style="visibility:hidden"> </span>
</span>
then you check if #ender is out of its container width:
function toolarge() {
var ender = $('#endd');
return ender.offset().left - ender.parent().offset().left > ender.parent().width()
}
their might be some adjustements to make like using position() instead of offset() and playing with position:absolute property, but you get the idea.
You could perhaps have an inner container that is set to full width of the content (overflow:visible). If this inner container is wider than the outer (overflow:hidden) container then you need to scroll. Move the inner container to scroll.
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
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.