Display block without 100% width

Question

I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?

Example: a news list where I want to set a "read more" link at the end of each post (note: <a> instead of <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Update: Solved. In CSS, apply

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Have you got any markup (HTML or CSS) to show us? It's difficult to work on the problem without anything to actually work on. Also a demo on [jsfiddle](http://jsfiddle.net) would be good. — Tom Oakley, Oct 03 '12 at 12:28
Thought I didn't need any sample code since it's just about positioning a span element. See updated post. — Staffan Estberg, Oct 03 '12 at 12:29
You can seriously cut down on all that markup by just using just one line of code as I mentioned below. — ha404, Apr 17 '15 at 22:57

score 179 · Answer 1 · edited Oct 12 '22 at 17:22

179

Use

display: table

in your CSS code.

edited Oct 12 '22 at 17:22

General Grievance

4,555
31
31
45

answered Oct 15 '14 at 17:47

ha404

1,989
2
13
10

15

Genius solution. `margin: 0 auto;` if you need it centered. – Mafia Feb 19 '15 at 22:05
1

`display: table;` works, but does not accept any padding. – donquixote Jun 15 '18 at 22:28
@ha404 you are right, padding works! https://jsfiddle.net/wgj7xvLe/4/ at least in my browser (Chromium). – donquixote Jul 09 '18 at 10:56
3

@donquixote it should accept padding as long as you use border-collapse: separate. just had that problem. – Brad Sep 21 '18 at 15:45

score 79 · Accepted Answer · answered Oct 03 '12 at 12:57

79

If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:

a {
    display: block; 
    float: left; 
    clear: left; 
}

answered Oct 03 '12 at 12:57

PJ McCormick

1,903
14
12

1

I tried applying this but since the span elements (title and date, in the example) doesn't have float the link gets positioned before the last span. Guess one solution would be to make all child elements in the li float. – Staffan Estberg Oct 03 '12 at 17:01
This works if I apply a clearfix for the li parent. Will go with this solution, thanks PJ. – Staffan Estberg Oct 03 '12 at 18:44

score 62 · Answer 3 · answered Sep 13 '17 at 13:46

62

you can use:

width: max-content;

Note: support is limited, check here for a full breakdown of supporting browsers

answered Sep 13 '17 at 13:46

Mustafa J

955
8
9

1

I'd never heard of this! Interesting. – Ryan Mar 30 '18 at 19:13
Was good since Chrome 46 and FF 66. Should be accepted answer. `inline-block` et al was breaking my layout. – i336_ Sep 28 '19 at 02:32
1

@i336_ As of today it's still not supported by the Edge browser. – ChrisW Feb 05 '20 at 13:39
Edge, or Chromium Edge? (To be clear; the former is going to be transitioning out for quite a while...) – i336_ Feb 07 '20 at 10:49
According to caniuse.com it is supported in Edge as of Edge 79 released Jan 14th, 2020. In total has a 92% support rating. https://caniuse.com/?search=max-content This is a nice welcome to me. When I first heard about it almost 2 years ago it did not have wide enough support for me to use in production but now it does. – Xandor Sep 11 '20 at 21:53
I have never heard of this rule and it is amazing – labago Nov 18 '20 at 16:00
Thanks, (not only semantically) much better than obsolescent solutions like table-mimicing or floats. Or in the words of the populace: *“This should be the accepted answer”*. – dakab Mar 25 '22 at 11:00

score 9 · Answer 4 · answered Oct 03 '12 at 12:29

9

I would keep each row to its own div, so...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

And then for the CSS:

.cell{display:inline-block}

It's hard to give you a solution without seeing your original code.

answered Oct 03 '12 at 12:29

George

36,413
9
66
103

1

Thanks, but I'd prefer not to mix in any div elements. – Staffan Estberg Oct 03 '12 at 12:34

score 6 · Answer 5 · edited May 06 '16 at 13:59

6

Again: an answer that might be a little bit too late (but for those who find this page for the answer anyways).

Instead of display:block; use display:inline-block;

edited May 06 '16 at 13:59

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2,754
1
26
39

answered Nov 01 '13 at 06:30

Renske

226
3
3

score 2 · Answer 6 · answered May 27 '14 at 15:46

2

Try this:

li a {
    width: 0px;
    white-space:nowrap;
}

answered May 27 '14 at 15:46

Roberto

31
1

Noob · Answer 7 · 2019-01-06T00:11:37.010

I had this issue, I solved it like so:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

the "white-space: nowrap" makes sure that the children of the child(if it has any) don't wrap to new line if there is not enough space.

without "white-space: nowrap" :

with "white-space: nowrap" :

edit: it seems that it also just works without the child block part for me, so just this seems to work fine.

.parent {
  white-space: nowrap;
  display: table;
}

score 1 · Answer 8 · answered Jun 06 '20 at 17:17

1

You can use the following:

display: inline-block;

Works well on links and other elements.

answered Jun 06 '20 at 17:17

Bruno Leveque

2,647
2
23
33

score 0 · Answer 9 · answered Apr 19 '22 at 22:33

i use this:

vertical-align: top; //do the trick

a {
display: inline-block;
vertical-align: top;
padding: 10px 30px;
border-radius: 5px;
background-color: #372a20;
border: 1px solid var(--blanco); 
color: var(--blanco);
margin: 0 auto -25px;
text-decoration: none;

}

Display block without 100% width

9 Answers9

Linked