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
Related
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.
I want to make P to be able to take more text than the height can contain, just so the text can be scrolled down to be read. DIV CLASS="others" has the right height I want. (500px)
The problem is, when I use the overflow: scroll function it goes all the way to the bottom of the page.
EDIT: Forgot to mention I want the titles "News" and "Products" to be without the scroll bar.
Thanks.
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}
.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}
.others #news {
background-color: black;
color: white;
text-align: center;
}
.others #products {
background-color: black;
color: white;
text-align: center;
}
.others a {
color: white;
text-decoration: none !important;
}
.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}
.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<H3 ID="newsfeed">News</H3>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<H3 ID="productsfeed">Products</H3>
<P>Cool photos here.</P>
</DIV>
</DIV>
As I mentioned in my comment, the issue is caused by specifying an explicit height to the inner paragraphs.
Besides, in order to make the inner paragraphs respect the height of their parents (#news and #products flex items which have the same height of their flex container, the .other) you could change the display type of the parents to flex as well and set their flex-direction to column.
And then give flex: 1; to the paragraphs as follows:
Example Here
#news, #products {
display: flex;
flex-direction: column;
}
#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}
As a side-note: make sure you have included the old (prefixed) syntax of flexbox as well for the sake of browser support. You could use tools like Auto Prefixer to achieve that.
You need a containing div on the paragraphs, then set overflow: scroll; and height: 460px; on that container (or whatever height you need to have it contained within the 500px tall .others block).
You'd also need to make sure your .others div styling doesn't apply to that container - in my example below, I changed that selector to .others > div to only select immediate children of .others. And you should remove the height: 800px; from the inner paragraphs, as mentioned by Hashem Qolami.
jsfiddle example
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'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>
JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
I am using CSS to skin a scroll bar that is created using JavaScript.
.scrollbar-track{
background: black;
height: 10px;
}
.scrollbar-thumb{
cursor: default;
border: 1px red solid;
width: 50px;
padding: 0;
}
.scrollbar-thumb-first{
display: inline-block;
background: green;
width: 5px;
height: 10px;
}
.scrollbar-thumb-middle{
display: inline-block;
background: red;
height: 10px;
width: 20px;
}
.scrollbar-thumb-last{
display: inline-block;
background: blue;
width: 5px;
height: 10px;
}
<div class="scrollbar">
<div class="scrollbar-track" style="width: 970px;">
<div class="scrollbar-thumb">
<span class="scrollbar-thumb-first"></span>
<span class="scrollbar-thumb-middle"></span>
<span class="scrollbar-thumb-last"></span>
</div>
</div>
</div>
And this is the fiddle: http://jsfiddle.net/w27wM/8/
Why is the inner div somehow larger than the parent div? Even with margin and paddings set to 0, the issue still remain.
Issue resolved by changing all the display: inline-block to float: left.
The problem may be related to this question, but removing all the whitespace didn't fix it for me. This might be due to the node being created in javascript.
Its a simple problem. By default the span line-height is 20px. An inline-block element read line-height to vertical-align.
So solution is either specify
line-height: 10px; or float: left;
Eg:
.scrollbar-thumb span{
line-height: 10px;
}
or
.scrollbar-thumb span{
float: left;
}
The .scrollbar div is not given an explicit width so it assumes the default = 100% of the width given by its parent.
The .scrollbar-track is given an explicit width of 970px which is beyond the width of the parent and the parent's parent. Thus, .scrollbar ends up thinner than its wide child .scrollbar-track.
Why are you setting the scrollbar-track explicitly but not doing the same for the .scrollbar (parent)?