For some reason setting height to 0px does not actually shrink the element to 0px visually...
<div id="bg">
<div id="animate"><span>WINNER ALERT! Click here to get a million dollars!!!</span></div>
</div>
#bg {
background-color:#898989;
font-family: Helvetica;
padding:20px;
}
span {
border:solid black 1px;
height:0px;
}
#animate {
height: 0px;
}
http://jsfiddle.net/LgKP3/
That is because span is an inline element. Height does not apply to inline element. Inline elements derive their height from the content that is contained in them.
See that here->http://jsfiddle.net/59xjv/
Even height:500px is not applied since the span is inline.
Similarly, it gets applied when you convert it to a block-level element.
See that here->http://jsfiddle.net/59xjv/1/
Hope this helps!!!
Give the <span> tag display: inline-block; and overflow: hidden;.
Fiddle here.
http://jsfiddle.net/LgKP3/1/
You have to set display to inline block, I also set overflow to hidden to hide the contents
span {
border:solid black 1px;
height:0px;
display: inline-block;
overflow: hidden;
}
Span is an inline element not a block level element which means it can't have a height at all.
Regardless the height you assign in the stylesheet for the span, it won't work.
I suggest you use a div with an id or a class of height:0px instead of a span.
Related
The inline element display perfectly if I remove the border or I change the display to block or inline-block. I don't understand why I can't see the border.
html:
<div class="content">test test test</div>
css:
body{
padding: 0;
margin: 0;
}
.content {
display: inline;
background: palegreen;
border: 5px solid red;
}
http://jsfiddle.net/Kodam/h1c3r5u3/
Let me quote this answer:
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
But if top border would be taken into account, it would make your div vertically misaligned with the other elements on the same line, even though in your case there is only a single element on the line. However, top border is ignored, therefore it is "sticking out" of the body and you cannot see it.
As a "proof", try to modify your HTML code in the provided fiddle as:
<div style="line-height: 50px"><div class="content">test test test</div></div>
Then you'll be able to see the top border, as the height of parent element has enough space for it not to stick out.
Why not use display: inline-block ?
.content {
display: inline-block;
background: palegreen;
border: 5px solid red;
}
I have this html sequence that displays 2 bars. Because inside the first div I display an inline list, I want to use display:table because it looks nicer in this way. The problem is that it extends the div, making it bigger with 20px (and moves the other div lower).
<div class="top-bar></div>
<div class="tail-bar></div>
.top-bar{
width: 520px;
height: 50px;
dispaly: table;
background-color: #FFFFFF;
}
EDIT: I added a JSFiddle http://jsfiddle.net/eCYUT/2/
It is the version without display:table tag
The gap between the ul element and the div element was actually the margin related to the ul element.
To remove it, give margin-bottom: 0px to the class name of the ul element.
ul.stats{
margin-bottom: 0px;
/* other css properties */
}
With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?
The final result desired:
parent element scrollable to child element
child element's width set to content
#Parent {
width: 100px;
height:200px;
background: #ccc;
overflow:auto;
padding: .5em;
margin: .5em;
}
#Child {
width:300px;
height:100px;
background:yellow;
}
<div id="Parent">
<div id="Child">
This is a test. This is a test.
</div>
</div>
It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/
I think this is possible. I just can't find a solution.
Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.
If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
As I have an element with a percentage height I can't use the line-height hack. Does anyone have any ideas on how to solve this?
<div height="100%">
I want to be vertically aligned in the middle
</div>
Here's what you want: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
You have to set the height value of div, then set line-height: value_of_div_height. line-height 100% won't work because it will take value of text, not div element. It works with or without vertical-align, as long as height=line-height
div {
height: 200px;
line-height: 200px;
display: block;
}
Alternative method if you want to do with a paragraph inside a div element: http://www.w3.org/Style/Examples/007/center
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
If you set the font-size, and you know the number of lines of text you have.
You can wrap the text in a span. And use the following CSS on the span.
span {
font-size:20px;
margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
position: relative;
top: 50%;
}