I have an inline-block div that I'd like to be no taller than its children. Is this achievable?
Here's an illustration of what's happening at the moment (color added):
.agenda-btn-container {
display: inline-block;
background-color: pink;
}
#agenda-view-start-btn {
background-color: gray;
}
#agenda-view-previous-btn {
background-color: gray;
}
<a class='agenda-btn-container' id='agenda-view-btn-container-previous' href='#'>
<i id="agenda-view-start-btn" class='i-vb-angle-double-left i-space--right'></i>
<span id="agenda-view-previous-btn">Previous</span>
</a>
Basically, my desired end-product would eliminate the pink space at the top and bottom, making the parent the height of #agenda-view-previous-btn. Initially, I was able to do this just fine by setting the parent to display: inline, but unfortunately, due to a cross-browser issue, the parent needs to be inline-block (or block would work, too, but I'm not sure that makes much of a difference here).
Add line-height: normal to reset the inherited line height.
.agenda-btn-container{
display: inline-block;
background-color: pink;
line-height: normal;
}
Related
I have a simple list of divs, with the exception that one div is an inline-block
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
...
div {
background-color: #000;
color: #fff;
line-height: 20px;
font-size: 20px;
}
div:nth-child(5) {
display: inline-block;
color: #bada55;
}
DEMO
all looks just fine (font-size :20px). However, when I change the font-size to 10px things are getting weird
DEMO
Although I can fix it by adding
body { font-size: 0 }
DEMO
I still don't understand why it did work with a line-height and font-size of 20px ? Any suggestions ?
Because the inline one has to be positioned inside the line height of its container.
If you set the container's line-height to 10px (the body in your examples) it will work fine.
Friends,
My question is why Firefox adds additional pixel (padding) below the box if I use display: inline-block?
Let's see what we have here: http://jsfiddle.net/xbU5s/9/
HTML - Two perfectly same elements.
<div class="wrap">
<section class="ib">Hello world</section>
<section class="il">Hello world</section>
</div>
CSS - Everything is the same, but our first section is inline-block and second one is inline.
.wrap { font-size: 0; }
.ib { display: inline-block; }
.il { display: inline; margin-left: 10px; }
section {
background: #000; border-radius: 3px; color: #fff; font-size: 11px; font-family: Sans-serif;
padding: 3px 5px;
}
And here's our 1px padding:
display: inline-block; vs display: inline;
Is is just rendering glitch (cause it's only happens in firefox) or I'm misinformed about inline-block's behavior?
Perhaps the answer is already explained here in old post
I will like to clear the difference..
If the element is with style display:inline the style restricts the object in line-height.
But, when block comes with inline the behavior of the same changes.
It is inline but with block it will expand to the possible height or width available.
For a change. select the text in both the box, you will see the second box is selecting out of the box. that is overflow of line-height which is restricted by inline but with inline-block it will grow with overflow caused by padding + line-height
I think this will clear most of the doubts, please refer the old post for more details.
This div is inside a 'page-container' div with a 'content div inside it, but the issue can be reproduced without those (as seen in the Fiddle below).
HTML:
<div class="download_link">Download PDF</div>
CSS:
.download_link {
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
.download_link:hover {
transition: 0.5s;
background-color: limegreen;
}
The div links properly and even changes color on hover. But the link stretches across the entire container. I have tried changing the width of all sorts of things.
>>> Convenient JSFiddle <<<
Generic division (div), by default, is a block element. Blocks, regardless of their width, take an entire line to themselves within their parent. In your case, the parent of the div is an anchor tag, which, by default, is inline. Inlines, likes absolute elements, inline-blocks, and floats, shrink-wrap around their children. The block within an inline inherently wants to "have" a line to itself, which is why it makes its parent stretch to the right and left edges of its body parent.
Franky, placing a div inside an anchor makes little sense. All you really need is just an anchor tag that serves its purpose. And, interestingly, if you display an anchor as a block, then the clickable link area will only be the width of the anchor. You have less markup and the functionality that you want.
Here's the jsfiddle: http://jsfiddle.net/hhm46/2/.
Here's HTML:
Download PDF
<p>Sample paragraph</p>
Here's CSS:
a[href $= ".pdf"] {
display: block;
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: background-color 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
a[href $= ".pdf"]:hover {
transition: 0.5s;
background-color: limegreen;
}
You should wrap the anchor tags inside the div, not outside. Fiddle.
<div class="download_link">Download PDF</div>
Simple, div is a block level element by default. Change it to display:inline-block or display:inline.
Inline Block Demo: http://jsfiddle.net/3Ld8U/2/
Though as #josh mentioned you may be better off putting the a inside the div
Two ways to do this:
I found a workaround for you:
<div id=wrapit style="width:200px; margin:0 auto 0 auto;">
<a href="http://www.example.com">
<div class="download_link">Download PDF</div></a></div>
If you would like for the anchor tag to go in the div like the others have recommended, I recommend you increase the padding of the anchor tag so that it extends to the edge of the borders.
.download_link a {
padding: 0 20px 0 20px;
}
I have a use case whereby I want to draw rectangles in CSS. I need them to look like this:
I've managed to get the smaller and taller boxes drawn but can't work out how to draw those that drop below the line. Here's a fiddle
Heres' my HTML:
<div class="word">
<p class="letter taller"></p>
<p class="letter"></p>
<p class="letter"></p>
<p class="letter hanging"></p>
<p class="letter"></p>
<p class="letter taller"></p>
<p class="letter"></p>
</div>
Here's my CSS so far:
p {
display: inline-block;
}
.letter {
padding 1.618em;
border-width: 1px;
border-style: solid;
width: 2em;
height: 2em;
}
.taller {
height: 4em;
}
.hanging {
/* not sure what to implement here */
}
Using margins may affect other elements, especially if you plan on including other content on your page. (See this) I'd recommend using position: relative combined with top: 2em. What that does is it pushes the element down 2em, relative to the original position of the element.
.hanging {
height: 4em;
position: relative;
top: 2em;
}
http://jsfiddle.net/WtuyL/6/
(On an unrelated note... here's a little bonus if you want to fully imitate the image and remove whitespace. You'll net to set a manual size to all <p> elements though.)
The simplest way is to use a negative margin-bottom to achieve this (you don't need to use positioning):
CSS:
.hanging {
margin-bottom: -16px;
height:4em;
}
JSFiddle
Note: also comment the whitespace between display:inline-block elements to remove it.
Reference - see this to see more hacks how to remove the whitespace between display:inline-block elements.
Try this.
.hanging {
height:4em;
margin-bottom:-1em;
}
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.