Short form question: Why is there vertical space between the bottom lines, and not the upper ones? I don't want the vertical space.
TL;DR
Same behavior in Firefox and Chrome, so not likely a bug, but clearly something I don't understand.
While I understand the font-size for .wrap3 is larger than the previous ones, the line-height is zero, and calculated that way according to the debugger. Also notice that although the text is 16pt, and its line-height calculates to 19.2pt, and that is very close to the font-size of wrap1. Further notice that .wrap2 uses a 40pt font... over twice as big, yet has no effect on the line spacing. But bigger than 40pt, and space appears. .wrap3 uses 60pt, which produces an obviously visible vertical space... but far less than 60pt.
I've read about struts here, another similar issue is here. And there is loads of info and several techniques for eliminating the space between inline and inline-block elements, and I've successfully used them in circumstances where that was appropriate.
Now, however, I'm facing the other case... where the space between inline elements is desired, to work in a fluid layout to provide space between elements. Although I have a <br> in the snippet, imagine far more than 4 items in the list, and varying sizes of browser windows or device screens.
What I'm trying to do, is to vary the space between inline elements, which is a quarter of the .wrapN font size, to my advantage. Spacing these items apart with padding or margin would not allow both the last item on one line to reach the very right edge of the window and also have the first item on the next line reach the very left edge of the window, although a solution using padding or margin or something else would be OK, as long as both sides of the window can be reached under appropriate circumstances.
body { margin: 0; padding: 0; }
.wrap1 { font-size: 20pt; line-height: 0; }
.wrap2 { font-size: 40pt; line-height: 0; }
.wrap3 { font-size: 60pt; line-height: 0; }
.foo2 { display: inline-block; line-height: 0; font-size: 0; }
.foo2 p {
}
.foo2 span {
font-size: 16pt;
line-height: 1.2;
display: block;
background: #ccc;
}
<div class="wrap1">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
<div class="wrap2">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
<div class="wrap3">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
If you want to remove the vertical space, change the vertical-align property to something other than the default value which is baseline (vertical-align: baseline).
.foo2 {
vertical-align: top;
}
When the value is set to baseline this vertical space is reserved for letters such as j, y, p, q.
body {
margin: 0;
padding: 0;
}
.wrap1 {
font-size: 20pt;
line-height: 0;
}
.wrap2 {
font-size: 40pt;
line-height: 0;
}
.wrap3 {
font-size: 60pt;
line-height: 0;
}
.foo2 {
display: inline-block;
line-height: 0;
font-size: 0;
vertical-align: top;
}
.foo2 p {} .foo2 span {
font-size: 16pt;
line-height: 1.2;
display: block;
background: #ccc;
}
<div class="wrap1">
<div class="foo2">
<p><span>text1</span>
</p>
</div>
<div class="foo2">
<p><span>2text</span>
</p>
</div>
<br>
<div class="foo2">
<p><span>3biggertext</span>
</p>
</div>
<div class="foo2">
<p><span>4text</span>
</p>
</div>
</div>
<div class="wrap2">
<div class="foo2">
<p><span>text1</span>
</p>
</div>
<div class="foo2">
<p><span>2text</span>
</p>
</div>
<br>
<div class="foo2">
<p><span>3biggertext</span>
</p>
</div>
<div class="foo2">
<p><span>4text</span>
</p>
</div>
</div>
<div class="wrap3">
<div class="foo2">
<p><span>text1</span>
</p>
</div>
<div class="foo2">
<p><span>2text</span>
</p>
</div>
<br>
<div class="foo2">
<p><span>3biggertext</span>
</p>
</div>
<div class="foo2">
<p><span>4text</span>
</p>
</div>
</div>
I dont know if this is quite the solution you are looking for but you could make each line a seperate wrap and then do something with padding-bottom like this
body { margin: 0; padding: 0; }
.wrap1 { font-size: 20pt; line-height: 0; padding-bottom: 10;}
Related
I have a div that contains two lines. Top line is title and bottom line is name.
when the title is short enough, that the name is on the bottom line (left image)
However, when the title is long, I want the overflow to go to the second line and have the name next to it like in right image.
Could someone help me with this?
Here is the html structure:
<div class="container">
<div class="content_top">
<span class="content">Something</span>
</div>
<div class="name_top">
<span class="name">Steve</span>
</div>
</div>
CSS trick. Place the name on the next line or on the same one
I've used the :first-line pseudo-element and the word-spacing property.
If the first line is short, then the name is placed on the next line. If the first line is long, then the name is placed on the same line.
Please check the result: codepen, jsfiddle.
/* heart of the matter */
.container:first-line {
word-spacing: 240px; /* the width of the container, or more */
}
.content {
word-spacing: normal;
}
.insert {
margin-right: -11px; /* defined by the normal inter-word space */
}
/* nice look */
.container {
border: 5px solid black;
float: left;
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
margin: 0 15px 30px 0;
min-height: 60px;
padding: 8px 10px;
width: 240px;
}
.name {
color: red;
}
/* little explanation */
.colored-background .content { background-color: lightblue; }
.colored-background .insert { background-color: orange; }
<div class="container">
<span class="content">Something</span>
<span class="insert"> </span>
<span class="name">Steve</span>
</div>
<div class="container">
<span class="content">Something Something Else</span>
<span class="insert"> </span>
<span class="name">Steve</span>
</div>
<div style="clear: left;"></div>
<div class="container colored-background">
<span class="content">Something</span>
<span class="insert"> </span>
<span class="name">Steve</span>
</div>
<div class="container colored-background">
<span class="content">Something Something Else</span>
<span class="insert"> </span>
<span class="name">Steve</span>
</div>
If the title is an <h1> tag for example, use CSS style:
h1 {
text-align: left;
}
I has this code
.cont {
width: 150px;
overflow: hidden;
resize: both;
border: solid;
}
.wrap:after {
content: 'A';
background: #ccc;
display: inline;
}
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao
</span>
<span class="emptyornot">
</span>
</span>
</div>
http://jsfiddle.net/rcsd7L74/
I need that :after always stay with last word in .wrap.
And if container too small - break line before last word.
The CSS you have will do this perfectly well; the problem you're having is that new-lines, in HTML, collapse to a single white-space character; remove those and it works (leading to this, admittedly ugly, HTML):
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span><span class="emptyornot"></span></span>
</div>
To allow for slightly prettier HTML (though, in fairness, HTML should be minimsed when sent to the client anyway), such as:
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span>
<span class="emptyornot"></span>
</span>
</div>
JS Fiddle demo.
The following CSS can be used:
.wrap {
/* sets the wrapping element's font-size to 0, to hide the collapsed white-spaces: */
font-size: 0;
}
.inner {
/* overrides the parent's font-size:
font-size: 16px;
}
.wrap:after {
/* as above, to make the text of the pseudo element visible */
/* no other changes */
font-size: 16px;
}
JS Fiddle demo.
Change width:
.cont { width: 160px }
I'm trying to add a subtitle below the title on my page. I've got an image to the left of the existing title, and the title is centered to the middle of the image. I'm trying to add a subtitle in a smaller font below the title and I can't seem to figure it out. The code I'm using is like so:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>
</div>
</div>
.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}
and here's what that looks like:
(I'm not including the code for the menu even though it's in the picture).
And what I'm trying to achieve is this:
Does anyone have any ideas?
You have a div.text which contains your title. Underneath that you need to place your subtitle. This code is called "html markup". You should use <h1> - <h6> tags for titles.
Here is an example (fiddle)
.header {
text-align: center;
}
.header img {
float: left;
}
.clear {
clear: both;
}
<div class="header">
<img src="http://dummyimage.com/100/000000/fff" />
<h1>Hello world</h1>
<h2>This is a subtitle</h2>
<div class="clear"></div>
</div>
Preview:
You can in fact do this with CSS.
div.text {
font-size: 32px;
font-weight: bold;
display: inline-block;
color: #fff;
vertical-align: top;
padding: 2px 1em;
}
div.text:after {
display: block;
text-align: center;
font-size: 20px;
margin-top: 1em;
content: "This is the subtitle";
}
.container {
background-color: #111;
display: inline-block;
}
.container img {
display: inline-block;
}
Now, whether you should do that with CSS is another question entirely. Content that's actually part of your page's message should be part of the page, not part of a style sheet.
Also, your "container" should probably be an <h1> tag. Also you don't need to close <img> tags, and self-closing tags are pointless in an HTML5 document (which yours may or may not be I suppose).
Try this:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>
</div>
</div>
.text {
margin-bottom: 0px;
padding-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-top: 0px;
}
There's probably 100 different ways to do this... Here's one. In your line of text, just use a <br /> and a <span>
<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>
Then style your subtitle like so:
.container .text span {
/* Something styled here */
}
The html your using could be improved as it is not really appropriate.
Try something like this
<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>
.header{
overflow:hidden
}
.header img {
float:left;
}
.header{
text-align:center;
}
Thanks, #Sergio S. That worked for me. A more general way of doing this, based on Sergio's answer (is the following):
CSS:
.classofheadertext {
margin-bottom: 0px;
padding-bottom: 0px;
}
.classofsubtitletext {
margin-top: 0px;
padding-top: 0px;
}
Full credit once again to Sergio. I've just put this in simple form :D
I've got a weird CSS float problem in IE6 and IE7.
My HTML is:
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div class="display-label">Requested by</div>
<div class="display-field">1066594</div>
<div class="display-label">Status</div>
<div class="display-field">Active</div>
</fieldset>
and my CSS is:
.display-label, .display-field
{
padding: 0.35em 0.25em;
float: left;
}
.display-label
{
width: 13em;
text-align: right;
clear : left;
font-weight: bold;
}
.display-field
{
margin-left: 1em;
}
IE 8+ and Firefox display this correctly like this:
IE6 and 7 , though, display the following:
How can I fix this?
you do need to contain the floats, i.e. use some form of clearance, but you don't need to float everything
first remove the inline style, unfloat the fieldset
<fieldset style="float:left">
if you want fieldset to "shrink-wrap" (floating an element without a width should do this) you'd be best to set a width or max-width on it, IE hasn't quite got the shrink-wrap behaviour right the element to be "shrunk" contains elements with hasLayout which this 'fieldset` does because of the floated div(s) inside
then this CSS should work without hacking the HTML
.display-label,
.display-field {
padding: 0.35em 0.25em;
}
.display-label {
float: left;
clear: left;
width: 13em;
text-align: right;
background: #eee;
font-weight: bold;
}
.display-field {
overflow: hidden;
}
EDIT: You need to specify a a clear after the label and the field are created. You should technically be wrapping both the label and field with a container element to prevent misalignment, but this should accomplish what you're looking for.
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div style="clear:both;"></div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div style="clear:both;"></div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div style="clear:both;"></div>
...
</fieldset>
I have some DIVs with contents inside. I want to display them side by side and if there is no space, I want to break the whole div, so the contents don't go to a new line alone.
I've made this example of what happens.
Here is a screenshot from the link above.
csspos http://img709.imageshack.us/img709/6799/csswo.png
And here is the expected output
cssposright http://img826.imageshack.us/img826/8530/csse.png
How about http://jsfiddle.net/qB225/15/? That adds
.item {
...
white-space: nowrap;
}
Put non-breaking space between your links and spans.
http://jsfiddle.net/qB225/22/
http://jsfiddle.net/qB225/21/
.master
{
width: 160px;
}
.item
{
display:inline-block;
font-size: 11px;
padding: 2px 2px 2px 0;
}
.item { display:inline; } /* DO NOT REMOVE, FOR IE */
.item a
{
text-transform: uppercase;
}
If you want them to only wrap as pairs you need to do two things. First change your html so that you group your item divs in pairs of two:
<div class="master">
<div>
<div class="item">
Text
<span>(10)</span>
</div>
<div class="item">
Text
<span>(10)</span>
</div>
</div>
<div>
<div class="item">
Text
<span>(10)</span>
</div>
<div class="item">
Text
<span>(10)</span>
</div>
</div>
</div>
And then add a float to the grouping divs:
.master > div{ float:left; }
Try using "inline-block" as follows:
.item
{
display: inline-block;
font-size: 11px;
padding: 2px 2px 2px 0;
}
Thanks.