I want the width of a div element to be equal to the width of the content inside it, and also (and more importantly) that any content after this div does not start to the right of the div(as though the div was float:left;), but display below the current div.
I know one way is that after this div, I create another empty div and set clear:both;, but in my case that would not be very preferable.
I think that the following may be close to what you need:
The HTML demo code is:
<div>
Some text may be before the element.
<div id="info">This is my bible!</div>And some text may follow. the element.
</div>
And the CSS styles are:
#info {
display:inline;
background-color:#CFFF9F;
color:black;
font-weight:normal;
border:black solid 1px;
}
#info:after {
content:"\A";
white-space: pre;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/6FNQc/
Explanation of How This Works
Use :after to generate some content (known as a pseudo-element in CSS). The "\A" is interpreted as a line break (linefeed) provided that the white space is preserved, hence you need to set white-space: pre. Finally, the element has to be inline, hence display: inline.
Related References:
CSS to line break before/after a particular `inline-block` item
To learn more about "\A" (linefeed), see:
http://www.w3.org/TR/CSS21/syndata.html#strings
Related
.pseudo{
width:100%;
height:100px;
border:1px solid blue;
text-align:center;
}
.pseudo:before{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
}
.pseudo p{
display:inline-block;
}
<div class="pseudo">
<p>hello</p>
</div>
This is my html & css code. my question is why i must use pseudo element the vertical-align:middle can work .
it's not work(vertical-align:middle) if write like this
.pseudo{
width:100%;
height:100px;
border:1px solid blue;
text-align:center;
display:inline-block;
vertical-align:middle;
}
The vertical-align property applies to the element of the text line (unless you apply it to something with display:table-cell), so keywords like center, top, and bottom are calculated from the height of the text line (the so called line box). The height of this line box is calculated basically from the heights of the inline elements that make this line (texts, images, inline blocks etc.), as well as their positions relative to each other (affected by some vertical-align values).
Without the pseudo element, the height of your line box is determined by the height of the text itself, so the text fits the whole line box, so its vertical midpoint is already aligned with the line box vertical midpoint, so applying vertical-align:middle changes nothing. But the inline block with 100% container height makes the line box (at least) as tall as this inline block (which means that the line box becomes as tall as the container). And aligning the vertical midpoint of the text with the vertical midpoint of this tall line box also makes the text visually centered in the container.
If you do not know how a pseudo class works, here is what you should do:
The definition of pseudo is: "not genuine; sham." (tku Google)
Go to MDN (Mozilla Developer Network) and read about pseudo classes.
A quick excerpt from MDN is:
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
Basically, you could have class .foo. Now let's say you want to style it when you hover over it. You could use Javascript, and add a class with the styles you want to use for hovering (using event listeners), but that is unnecessary and wasteful. Instead, you add a pseudo (remember: "not genuine; sham") class. So its a class, but it's not really a class. A pseudo class is defined with a : after the selector and before the pseudo class. For example:
span:hover
.my-class:first-child
#id-4-me:not(#id-not-4-me)
etc.
There are also pseudo elements. They are defined with ::. You can read about them here.
In the future, please research your question before asking it, in alignment with the stackoverflow guidelines on asking
I'm writing the following HTML markup:
<span> Some Text
<div id="ch">татата</div>
</span>
and styles:
span{
border: 1px solid black;
text-align:center;
width: 300px;
height: 300px;
background: aqua;
}
#ch{
width:100px;
height:100px
background: yellow;
}
jsFiddle
Why is the height property not applied to a div element which inside the span, but width is applied?
Why is the right border of my span is missing?
Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )
Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!
Answer 2 : add display:block to span to change the default behavior
working fiddle with correct markup
fiddle with the layout you wanted
span display:inline you must set it display:inline-block
but this not standard you must use div span always use for text
your fiddle demo
Because you are missing a semicolon after height: 100px <- this ; is missing in you css file
span is an inline element so it will not take notice of your height and width. For this you need to give it either:
display:block; or display: inline-block
First answer: You forgot the semi-colon after height style, that's why it is not rendered.
Second answer: If you look closely, the border appears after the div. This is because you
are inserting block level element inside inline element. So, block level element takes it to the next line and then it takes the whole line. On the very next line you can see the right border for the span.
It is bad practice to put block level element inside inline element. In fact, I do not see any practical use of this kind of structure. Please, correct it if you are learning.
By default div's is a block element and span is an inline element. Block elements always flow vertically and inline elements always flow next to each other from top left to the bottom right depends on screen width.
We can use inline elements under the block element, not vice versa. If we override we expect to see some issues like this on responsive layout.
span is an inline-element, while div ist not. you should consider swapping them..
A very simple task in hand.. but my browser is laughing on my face with my futile attempts.
How do I style a div class just around the text
So I am using jinja on backend and my html looks like this
<div class="content">
<pre> {{contents}}</pre>
</div>
and my css is
div.content {
background-color: #add8e6;
}
But what is happening is.. if "content" is half the line.. this styling is running across the whole horizontal line..
I just want to gracefully wrap the color across the text rather than whole horizontal page.
When I try
display: inline;
all the background color vanishes.
Use display:inline-block
div.content {
background-color: #add8e6;
display:inline-block
}
DEMO
Difference between inline and inline-block
inline-block - 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.
inline - This value causes an element to generate one or more inline boxes.
Try this:
div.content * {
background-color: #add8e6;
}
This will apply the style to all the elements within the div block.
I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.
Here's an example: http://jsfiddle.net/alecrust/zstKf/
Here's the desired result (using display:block and defining a width): http://jsfiddle.net/alecrust/TmwhU/
If you want to avoid setting an explicit width so you can style the background according to the actual length of the text, you can do the following:
Wrap your link:
<p>To stay up to date <span>Follow Us</span></p>
Note that I have added a <span> tag around the link.
Style your wrapper with CSS:
span {
display: inline-block;
width: 100%;
}
Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.
Forked JSFiddle: http://jsfiddle.net/Cm9kZ/
It's a bit of a kludge, but it will work:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.
The closest I can get to what I want is using :before to insert a new line before the <a> (Fiddle). This unfortunately doesn't clear it to the next line though.
This only works if you want to line break after the last element in the p.
I've experimented quite a bit and this works for me, in Safari 6:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
I have not tested this in other browsers, but it's so simple it should work in all browsers supporting display: inline-block.
An empty <div/> after the inline-block element, clears the inline-block.
With the requirements you have, I don't think it's possible.
I was hoping that this would help, but it doesn't because you don't have an element before your link.
You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/
Using the pseudo class :: after you could add content with a clear:both; property to it.
Not tested but should work in theory.
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.