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.).
Related
JSFiddle demo
In a dropdown with a container element set to display: inline-block, there is a label (always visible, toggles dropdown overlay), and the overlay element itself. I am setting the overlay container to height: 0 and wishing to allow the overlay contents to exceed the height of the container, without affecting any parent elements. However, I am seeing some strange results - the overlay container is causing the parent of the dropdown to fully enclose the overlay contents too!
In the following HTML, ib = the inline block and h0 = the height:0 overlay container. See the jsfiddle demo to see it in action.
<div>
Sort by this
<span id="ib">
<span>LABEL</span>
<div id="h0">
DROPDOWN<br />
</div>
</span>
</div>
I don't wish to use position: absolute on the overlay, as I would like the contents of the overlay to drive the final width of the label. Surprisingly, I can achieve the desired outcome with the following css:
#ib { display: inline-flex; flex-direction: column; }
I'm happy to use that workaround for now, but also interested in the "why" behind this bizarre effect.
Your issue is about vertical-align rule for inline block elements. By default it baseline, here is some spec:
Baseline: Align the baseline of the box with the baseline of the parent box.
See also:
The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
source: https://www.w3.org/TR/CSS2/visudet.html#line-height
and
CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom.
source: https://www.w3.org/TR/CSS2/visudet.html#inline-box-height
So your fix is ignore default inline-level block height setted via line-height and font-size by setting vertical-align: top/bottom/middle/text-top/text-bottom by your choice.
And fixed code:
.dropdown {
display: inline-block;
vertical-align: top;
}
.overlay {
height: 0;
}
<div>
sort by this
<span class="dropdown">
<span>LABEL</span>
<div class="overlay">
DROPDOWN<br />
DROPDOWN<br />
DROPDOWN
</div>
</span>
</div>
<hr />
I would need advice on how to do that I have reached the correct result. Here is a sample code.
I used the main attribute table-cell that I reached the vertical centering, but not me centered DIV #box under DIV #wrap. Neither ANCHOR vercital centering under DIV #box. ANCHOR object must align automatically without specifying the size. Images under ANCHOR may have different sizes.
All ANCHOR objects under DIV #box must align automatically without any separation into DIV blocks. Into DIV #box are automatically displayed those items that can fit in there. Sorting may not be conditional size and neither the number of items. The only condition is the height and width of the DIV #box.
Example:
Main structure
Sequence ANCHOR must not be fixed specified or limited to the number; automatically centered on all sides under DIV #box; automatically adjust the image size.
DIV #box must be aligned horizontally to center under DIV #wrap, has specified a
fixed width and height; the entire contents of the DIV #box must be aligned to the center, both horizontally and vertically; everything that does not fit in the block will be automatically hidden.
It may also be a solution via jQuery.
Thanks for resp.
If you don't allow separation in additional DIV wrappers, then it is impossible to achieve your result cleanly and with reusable non-hard-coded code.
You restrict development options (probably not your fault) by not allowing to change HTML structure.
But if there were no restrictions, then there would be multiple ways to solve this problem:
Using HTML and wrapping little objects into group wraps and a bit of CSS
Hard code CSS with negative margins, relative positioning for every single element
Achieve the same thing with jQuery / JavaScript but with lots of exceptions and computations
Because elements in HTML can be of 2 types - block and inline .
[ let's not go here into specifics of what inline-block elements and other types are]
If an element is of block type then the next proceeding element will jump to the next row , but if the element is of type inline then the next element will line up next to it if there is space in the row. The height of the row is dictated by the highest element AND NOT by a group of highest elements .
The only way to achieve that would be to wrap them into a group.
So in CODE this would look like so:
HTML:
<div id="box">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<span id="group">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
</span>
</div>
CSS:
#group {
display:inline-block;
vertical-align: middle;
}
#group > :first-child {
display:block;
}
RESULT in jsFiddle
I have the following div
<body>
<span style="border:1px solid red; display:inline-block">
Some text<br />
<hr />
some more text
</span>
</body>
In "normal" web browsers, the width of the div is calculated to fit the text. And the hr is 100% of the div.
But in IE7 the hr causes the div to expand to 100% of the body.
Is there any clever css I need to add somewhere so it behaves correctly in IE7?
Please note, I can't set any fixed width.
In IE6/7, display:inline-block only works on elements that are inline by default (e.g., span). So if you try setting a div to display:inline-block, it won't work in IE6/7.
An inline element will size itself to the width of its content. An inline-block element will do the same by default, if it's not given an explicit width. If the hr is 100% (100% of its parent, which in turn is 100% of the child), then there's a circular definition for the hr width that may not work as expected (100% of what? 100% of itself).
To avoid a circular definition for the width that may not work as expected in some browsers (especially IE6/7), either the container of the hr (div, span, or whatever) should have a defined width (in px, %, or em) or the hr itself should have an explicit width (in px or em). Otherwise, the width is not defined in any identifiable way, and it's left up to the browser to decide what to do by default.
If you can't set any widths, that may rule out using an hr tag. And based on the tests I ran, the options don't look very good for CSS solutions either (without setting a width).
Edit:
I think the only way to do this without setting widths or relying on JavaScript or jQuery, is if it's acceptable to have a horizontal line after every line of text (including any long paragraphs that wrap around to the next line, if there are any). In that case you could add a bg image to the container that contains a horizontal line at increments equal to the line-height of the text, displayed at a vertical offset equal to the line-height so a line doesn't appear at the top of the first line of text.
HTML
<div class="main">
<p>This is the first line.<br/>
This is the second line.<br/>
This is a long line that will wrap around to the next line if the container is not very wide.
</p>
</div>
CSS
.main {
background: url(image.png) repeat-x left 15px;
}
p {
font-size: 12px;
line-height: 15px;
}
jsfiddle demo
The width property of the <hr> tag has been deprecated, so you're styling options are limited on the <hr> tag.
15.3 Rules: the HR element
Index of Attributes
A more modern approach is to use the border property of a <div> instead.
Image rendered by IE 7:
Image rendered by Chrome 19:
jsFiddle Demo
HTML
<body>
<div style="border:1px solid red; float:left;">
<p>
Some text
</p>
<p class="border-top">
some more text
</p>
</div>
</body>
CSS
.border-top{
border-top:#000 1px solid;
padding-top:1em;
}
Note: IE 6 & 7 don't support display:inline-block, so you might need to use float:left instead. The article below compares the use of the aforementioned properties:
CSS display: inline-Block: Why It Rocks, And Why It Sucks
Found a method at a blog. The original one required modernizer.js. I've edited it.
HTML:
<div class="hrdemo"><hr /></div>
CSS:
.hrdemo hr {
display:none
}
However, if your div.hrdemo is inside some floated container; you may have to assign a fixed width for it (for IE7).
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>
I have an item on the DOM that I'd simply like to have fill its parent's width, regardless of what that is:
<div width="800">
<div class="filler"></div>
</div>
How can I specify in CSS that the filler class match the width of its parent?
.filler {
?
}
Have you tried: width: 100%; ?
Depending on what you inner item is, there are various approaches.
If it's a block-level element (a paragraph, a div, etc.), it will automatically adjust itself to fill 100% of the container's width.
If it's an inline element, too bad for you, it won't accept width:100% until you convert it to a block-level element: display:block.
Floated elements are a special case: they will only span to the width of their inner content, even if they're block level elements. They require width:100%.
Absolutely positioned elements are even tougher: they need width:100%, but the container also needs a positioning context, eg. position:relative.
Examples of all four cases: http://jsfiddle.net/dD7E4/
If the inner element is not a div and has padding or margin, flexbox might be the best solution:
<div class="container">
<div class="filler"></div>
</div>
.container {
display: flex;
}
.filler {
flex-grow: 1;
}
See also this answer about how to fill remaining vertical space.
Unless there's something stopping them, block-level elements such as div and p will always fill the entire width of their container. If you have an inline element such as a span or an a, you could style it as display: block to turn it into a block-level element, but this will also put a line break before and after it.
div is a block element and by default fill his parent.
if it doesn't you probably use float:left or float:right or display:inline or your parent is not 800px.
(maybe you should try with style="width:800px" or width="800px" instead of width="800")
I usually put a color border to see how it works.
By default it will fill its parent element's width as div is an block element.