I have an inline-block element that I want to put a border-bottom on, but when the text inside that element wraps to the next line, it puts the border on the bottom of both lines of text, instead of just the bottom of the element.
Heres a demo:
http://codepen.io/Tiger0915/pen/azpeVY
And here's the pertinent SCSS:
div {
width: 150px;
text-align: center;
span {
border-bottom: 20px solid rgba(0,0,0,0.3);
}
}
How do I get it to only put the border on the bottom of the element?
Reason I have to use display: inline-block and can't just use display: block:
I need text to be able to wrap to a new line, as the screen size is
small
I can't specify a defined width on the span, it needs to change width based on whether or not the text can fit on 1 or multiple lines (depends on screen width)
The span needs to be text-align: center within the div
I changed your SCSS to this and it worked fine for me:
div {
width: 150px;
text-align: center;
span {
display: inline-block;
border-bottom: 20px solid rgba(0,0,0,0.3);
}
}
Just add display: inline-block; to the span like you said. By default, <span> elements are display: inline; not display: inline-block;.
You can wrap the span in a div and assign the border-bottom to the div.
add a wrapper div
<div>
<div class='wrap'>
<span>
This is a long sentence.
</span>
</div>
</div>
assign border-bottomis SCSS
div {
background: rgba(0,0,0,0.1);
width: 150px;
margin: 100px auto;
padding: 20px;
text-align: center;
div {
padding: 0;
border-bottom: 20px solid rgba(0,0,0,0.3);
span {
font-size: 24px;
}
}
}
Here is a working codepen.
Related
This question already has answers here:
Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
(5 answers)
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
This may be basic but i read in a book that to center something inside a div you should :
margin-left: auto;
margin-right: auto;
width:70%;
so you give it a width and set auto margin.
With button it will not work and I also need to add this to make it work :
display: block;
Why in this case we need it block ?
inline/inline-block elements can't have auto value for margin.
If you want to center button without making it a block, you can use text-align: center on it's parent.
Also, button don't have to be a block if it's being centered by a flex/grid parent.
I added a few examples below.
.wrapper-center {
padding: 20px;
border: 1px solid blue;
text-align: center;
}
/* ----- */
.wrapper {
padding: 20px;
margin-top: 20px;
border: 1px solid red;
}
.centered-button {
display: block;
margin: 0 auto;
}
/* ----- */
.flex-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 20px;
border: 1px solid green;
}
<div class="wrapper-center">
<button>Test</button>
</div>
<div class="wrapper">
<button class="centered-button">Test</button>
</div>
<div class="flex-wrapper">
<button>Test</button>
</div>
Display: block
This gives the section or div a whole part of the page to itself, starting from what is essentially a new line and taking up the width of the page. Margin and width statement only affect it because of this. Inline or otherwise don’t have this property requirement due to the fact that their properties become relative to other elements on the same line
If I have a container, with several nested divs :
<div class="beat-container" id="beat-container-1">
<div id="1-1">
<div class="beat" id="beat-1-1">
I am a beat View<br>
</div>
</div>
<div id="1-2">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
<div id="1-3">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
</div>
and I use float on all but the last child, I get the functionality I need, where they are side by side. Adding float:left to the final one prevents the enclosing parent container from wrapping all the children, and it loses its height.
If I add it to all them, then try to add a :last-child it still doesn't work.
How do I get the divs to be inline, and have the parent border still wrap them.
The container height should be dynamic, so no specific height attributes or JS.
CSS:
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
}
.beat {
display: inline-block;
border: 1px solid purple;
float: left;
}
.beat :last-child {
float: none;
}
/* .beat :not(:last-child) {
display: inline-block;
border: 1px solid purple;
float: left;
} */
Fiddle
I hope I have understood your questions correctly.
You can add overflow: auto; to .beat-container then it will wrap the content.
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
overflow: auto;
}
http://fiddle.jshell.net/g3L3w/2/
If you want to use the last-child selector to target the last div with .beat you have to target the parent of .beat as all .beat are both first-child and last-child of the parent in your current structure.
e.g. .beat-container > div:last-child > .beat
You can go with a less qualified selector for your example but in a bigger context it would probably be what you want.
http://fiddle.jshell.net/g3L3w/4/
Hi, i want to make this layout.
I am trying to do it in this way:
<div class="container" >
<div class="picture_cont">...</div>
<div class="info">...</div>
<div class="price">...</div>
</div>
And CSS
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
}
.container .info {
float: left;
}
But i am getting this picture:
There is some issue with right column.
How to make it right ?
A mix of relative and absolute positioning will also do the trick. Something like this:
.container{position:relative;}
.picture_cont{position:absolute;left:0;top:0;bottom:0;width:100px;border-right:...}
.info{position:absolute;left:101px;top:0;bottom:0;right:151px;}
.price{position:absolute;right:0;top:0;bottom:0;left:150px;border-left:...}
Here's a fiddle to demonstrate.
you are missing overflow:auto;
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
overflow:auto;
}
.container .info {
float: left;
}
You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces a new block formatting context restoring the flow of the .info container to be independent of the floated sidebars. (Note that you need to be careful of collapsing margins and non-staticly positioned elements to avoid scrollbars).
HTML
<div class="container" >
<div class="picture_cont">...</div>
<div class="price">...</div>
<div class="info">text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
CSS
...
.container .info {
overflow: auto;
}
Fiddle Demo
Source: http://jsfiddle.net/StMLm/
Demo: http://jsfiddle.net/StMLm/show
Because the items are floated and the middle has no specified width, the last item will "feel" the text of the second ("info") and be bumped down below it -- there is nothing telling info that, instead, it should stop 200px from the right edge. (150px? -- your picture and CSS don't match up)
One way to achieve that is to put right-padding of 200px (150px?) on info and then move the right-column into place with some CSS trickery: see In Search of the Holy Grail for this classic solution.
A newer approach is to use display:table on the container display:table-cell on the 3 inner parts, set the width's on the left- and right-columns, and be done with it.
You're using floats, so all your containers are independant, which means you can't base position and size on other containers. So in your case you'll have to specify a width for your containers so that they are fixed and don't overlap each other.
Also try and put a "top" of 0px on your price container. This should help out.
I typically use "inline-blocks" and fluid widths. This nice thing about this method is you can add a "min-width: 240px" and your UI will stack on mobile devices. (jsFiddle)
div.container {
width: 100%;
}
div.container div {
border: 1px solid blue;
overflow: auto;
height: 10em;
display: inline-block;
margin: -3px;
padding:0;
}
div.info {
width: 70%;
}
div.picture_cont,
div.price {
width: 15%;
}
I have a 5x5 grid and when i add content to the div, it is shifted down. Can anyone explain why this is happening?
codepen example: Risk Matrix
You need to add this to vertical-align: top and margin-top: 3px;
.r5 > div, .r4 > div, .r3 > div, .r2 > div, .r1 > div {
border: 1px solid #000000;
display: inline-block;
height: 50px;
line-height: 50px;
margin: 4px 0 0;
text-align: center;
vertical-align: top;
width: 50px;
}
I believe its because content pushes the dom out of empty space.
HERE is the answer why this happends.
In a inline-level (inline-block) you have to specify the vertical alignment of text. So in essence without setting where the vertical alignment is content is placed in its default which is baseline. This is why your text offsetted your layout.
If you set:
.r5, .r4, .r3, .r2, .r1 {
margin-left: 40px;
> div {
display: inline-block;
vertical-align: top; <-- this
width: 50px;
height: 50px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
}
It aligns properly.
Setting overflow:hidden on the <div /> elements should fix it as it will make the elements ignore any margin or padding that inner-nodes create that overflow the containing element.
Here is a demo: http://codepen.io/anon/pen/mDonw
I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle