This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 1 year ago.
I have 3 divs, I want to keep those side by side but if the text inside each div goes long, break the text to a new line and keep the next div beside that.
<div style="float: left;">this is a text</div>
<div style="float: left; text-decoration: underline;">Will continue in next div</div>
<div style="float: left;">and this will be beside that</div>
I want to show above divs like this (the second div should have underline)
this is a text that will continue
in next div and this will be beside
that
By default, a div element has a display attribute value of block which will place it on its own line in the document. If you want them to be side-by-side, you can set the value to inline or inline-block (if you want to set a width/height).
div {
font-size: 4rem;
display: inline;
}
#second {
text-decoration: underline;
}
<div>This text is in the first div element and</div>
<div id="second">continues into the second div element and</div>
<div>finishes in the third div element.</div>
If all you need the separate elements for is to underline the text in the second div, then I'd suggest you use a span instead to avoid the headache of removing styles from the divs and remembering to exclude them from any future CSS selectors.
div {
font-size: 4rem;
}
.underline-me {
text-decoration: underline;
}
<div>This text is all in one div element <span class="underline-me">even though this part is underlined</span> so it will flow without needing to change the display property</div>
Related
There is section inside which i have defined text-align as left for a line but its not taking effect for some reason
<section id="topic1">
This is a centered Heading for Topic 1<br>
<span class="text">This is a left aligned line</span>
</section>
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: inline-block;
text-align: left;
}
I tried display: block for text span tag in above code and text got aligned to left but i am looking for a alternative way to do this
Reason for finding alternative way - Even tho block display is aligning text to left , keeping display as block for all the span tags within my webpage increases the space between each span tag for some reason
Practical example below
<span class="text">This is line 1</span><br>
<span class="text">This is line 2</span>
.text {
display: block;
}
If you check output of above code there would be space between line 1 and 2 because of display block .
I am okay with using display : block to make text align work for span tag
But then this unnecessary space created by block display bothers me
Isn't there any way to avoid that unnecessary space ( seen between line 1 and 2 ) created while using block display
An inline-blockelement is only as wide as its contents, in your case NOT the full width of the container.
In their container inline-blocks are aligned according to the text-align setting of the parent element (= the container, in your case #topic1), thats why they are called INLINE-blocks.
So if you want it left-aligned, you have to change the alignment of section to left. And wrap your to be centered text in a heading element (like <h1>...</h1>, wich is a block element having 100% width by default) to which you apply text-align: center. And BTW, that would also improve the semantical quality of the HTML - headers should be wrapped in header tags.
About "unneccessary vertical space between lines": That the default margin-top and margin-bottom of these elements - you can reduce those by defining them in the CSS for the according elements)
You can do something like this using margin. This will allow you to adjust the spacing between the blocks. Also, you can remove the br tags.
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: block;
text-align: left;
margin: 10px 0;
/* CHANGE THIS VALUE */
}
<section id="topic1">
This is a centered Heading for Topic 1
<span class="text">This is line 1</span>
<span class="text">This is line 2</span>
</section>
You have a space after the period.
To select class="text", use:
.text
not
. text
Try adding float: left instead of text-align:left. As span element or inline-block element take only fit width. float will help align the item with respect to parent.
https://codepen.io/pratik-sangami/pen/dybKMVz
This question already has an answer here:
Understanding the flex property
(1 answer)
Closed 3 years ago.
In this old stackoverflow question, i have read the code with the question but could not figure out why this code produces a header and a footer that could take up width 100% and not displayed in the same line with other elements??
Understanding the flex property
in fact, you have three lines, (represented in that red box) but in the middle line you have three other boxes, these boxes are placed side by side because the middle box has the property display: flex; this defines that your direct children will be shown side by side
(sorry, I'm a terrible designer)
note that the only difference of the body to the footer and header is that it has a greater height, taking away the fact that it has other boxes inside its behavior is identical to the footer and body
note that the div element has a default display block which means that it will occupy 100% of its line, otherwise you can use the display: inline; this will make the element occupy only the space of the child element, an example:
.wrapper-h1 {
background-color: red;
}
<div class="wrapper-h1">
<h1>first h1</h1>
</div>
<div class="wrapper-h1">
<h1>second h1</h1>
</div>
In this exemply by default the two wrapper have display: block; property
.wrapper-h1 {
background-color: red;
display: inline-block;
}
<div class="wrapper-h1">
<h1>first h1</h1>
</div>
<div class="wrapper-h1">
<h1>second h1</h1>
</div>
and here they appear side by side, on account of the inline property changing its standard behavior. each tag has a default behavior type, the default display of the div tag is this, occupying 100% of the parent element
This question already has answers here:
What is the difference between HTML div and span elements?
(13 answers)
Closed 5 years ago.
When I use a css class within a div tag it seems to ignore what is inside the css.
.centered {
background-color: red;
padding: 5px 20px 5px 20px;
}
<div style="text-align:center" class="centered">
I am centered with bg around me
</div>
When is use the same class with a span tag nested within the div element it does what I want.
<div style="text-align:center">
<span class="centered">I am centered with bg around me</span>
</div>
Why is this? What makes the difference?
This is with the first code
This is with the second
<div /> is a block level element, which takes up 100 % of the available width by default. <span /> is an inline element, which only takes up the minimum amount of width it needs to display its content.
There's a really good article on learnlayout.com that does a great job explaining this.
Happy coding :)
Its because a span is a inline element and a div is a block element.
To see the difference you can make the span a block element by doing this:
.centered {
display: block
}
More about inline vs block
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I have three divs horizontally stacked side by side to one another and these divs are set to display: inline-block. However, I have noticed that even with using some sort of CSS reset they produce a small 4px distance between each other? Why does this occur? Is there a way to globally get rid of this from happening or do I just have to shift the divs to the left -4px?
This is caused by the fact your browser will render the DIV's inline and as with words, they are separated by spaces.
The width of the space is determined by the font-size, hence an easy trick is to set the font-size of your containing element to 0 and then reset the font-size in your inline divs.
#container { font-size: 0; }
#container > div {font-size: 1rem; display: inline-block; }
I have demonstrated this in this Fiddle.
Take a look at this article for more info.
Suppose that is because of line break characters after each closing tag. Those are handled as spaces in HTML. Try to remove them. Here are few demos:
http://jsfiddle.net/eeRFC/ - with spaces
<div>test</div>
<div>test</div>
<div>test</div>
http://jsfiddle.net/eeRFC/1/ - with no spaces
<div>test
</div><div>test
</div><div>test
</div>
And common CSS:
div {
border:solid 1px black;
display:inline-block;
}
Get rid of the new line between end of the prior div and start of next div
For example replace the following:
<div id="div1">
Div Item 1
</div>
<div id="div2">
Div Item 2
</div>
with
<div id="div1">
Div Item 1
</div><div id="div2">
Div Item 2
</div>
Using either float:left or display:inline-block would work. please refer to the working example link here.
You most likely have newlines between the divs in your HTML, right? If there are any separators between divs then the browser will display spaces between them.
The following example has spaces between the divs:
<style>
* {
margin: 0;
border: 1px solid black;
}
div {
display: inline-block;
}
</style>
<div>
Div1
</div>
<div>
Div2
</div>
<div>
Div3
</div>
There are two methods you can use to remove the spaces between the divs. Either take away the separators between the div elements like so:
<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>
Or make your divs floating elements:
...
div {
display: inline-block;
float: left;
}
...
Hope that helps!
Edit:
Also see related SO question: How can I stop the new line from adding a space between my list items in HTML
I often find that I want an element to adjust its width to the size of the elements it contains. inline-block acheives this. However, I do NOT want the inline part of inline-block -- i.e., I still want the next inline-block element to appear below it.
Is there a simple way to achieve this in CSS? I know I can't always but <br> tags after the element in my HTML, but that's annoying.
You can do that with two elements:
<div>
<div class="element">
content...
</div>
</div>
With the CSS rule:
.element { display: inline-block; }
Treat .element as the "real" element that you're adjusting the width of. The enclosing <div> is just there to force each element into its own inline flow.
there are many solutions, the most common one is to use float
<div class="float">
<div class="child">here is content</div>
</div>
.float{float: left;}
if you want enforce that an element is in the new line you add clear: both (or left or right, depending on your needs)
please take into account, that display: inline-block does not work in IE7. The only problem with float is when you want this div to adjust to the width of a child AND to position it at the middle of the page horizontaly
one more note, remember that overflow: hidden property is your best friend whenever you encounter any issues with floated divs :)
Here is a fiddle that achieves what you describe: http://jsfiddle.net/PhilippeVay/VwCgJ/
It uses floating elements (thus width is ajusted to content), a class on the last element you want on a line and the clear property on the next element, with the help of the adjacent selector .rightmost + span
HTML:
<p>
<span>lorem</span>
<span class="rightmost">ipsum</span>
<span>third item: below please</span>
<span>fourth and last</span>
</p>
CSS:
span {
display: block;
float: left;
padding: 20px;
background: lightblue;
border-right: 2px solid white;
}
.rightmost {
background: red;
color: white;
}
.rightmost + span {
clear: both;
}
Inline content (as for inline-block) will occupy the whole width of its container and you've to force a new line with the br element.
On the other side, floating elements can be cleared (and with adjacent selector, you can clear the element after a particular one).