I am trying to add a table border for just the inner sections, I don't want the borders to be placed at the first and last cell.
So, I tried:
.grid > div:last-of-type {
border-right: none;
}
However, as you can see in the image, the last cell is 5px larger than the rest now, that is because it is trying to fill the empty space left behind when we removed the padding from it... How can I remove the padding, but keep its height the same as the others? maybe a way to make all of them stretch to fit? please bare in mind, I can't add a fixed height as the number of cells will change and their hight may vary.
I have also tried adding border-collapse:collapse; it stretched them (AWESOME!) but the middle cell is now slightly smaller than the other two.
Here is a JsFiddle: http://jsfiddle.net/ju76y/5/
(Added images to the fiddle)
.grid {
width: 100%;
overflow: hidden;
background-color: green;
display: table;
table-layout: fixed;
word-wrap: break-word;
text-align: center;
letter-spacing: 0px;
word-spacing: 0px;
}
.grid > div {
display: table-cell;
vertical-align: top;
border-right: 5px solid red;
}
.grid > div:last-of-type {
border-right: none;
}
Try adding this to the cell property:
box-sizing:border-box;
This will align the last div to align properly with others
.grid > div:last-child > div {
margin-top: -2px;
}
DEMO
same need to be applied for the first child also
.grid > div:first-child > div {
margin-top: -2px;
}
Related
I have container with css elements. All of the elements has display: inline-block property. The problem is that one of the element is twice hire than the rest and instead of having two elements on the side I have only one and a lot of white space. This is how it looks:
my css is:
.productBlock {
display: inline-block;
background-color: darkgray;
height: 271px;
width: 161px;
margin: 3px;
}
.productBlock-higher {
background-color: darksalmon;
height: 548px;
width: 161px;
margin: 3px;
display: inline-block;
}
How can I remove the white space and add element another element there?
I would like to add move two elements on the right side of the higher div. It should look like this:
if I understand correctly, you need to set the vertical align top
https://codepen.io/opmasan/pen/vYNvbpZ
.productBlock {
vertical-align: top;
}
I solved it. I added:
.productBlock-higher {
float: left;
}
I am trying to get a line over my title that lines up evenly with lines before and after my `sub-title
I looked at two references:
Line before and after title over image
CSS technique for a horizontal line with words in the middle
These helped me get started but I am not sure how to get the top line even with the before and after lines without wrapping despite the length of the title or subtitle.
<div class="title">
<h1>Testingtesting</h1>
</div>
<div class="sub-title">
<h1>Testing</h1>
</div>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
h1 {
width: 20%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .1em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .1em;
}
span {
display: inline-block;
vertical-align: middle;
}
.title h1 {
border-top: 1px solid black
}
.title h1:before, .title h1:after {
border-bottom: 0px solid;
}
</style>
You should use white-space: wrap; it should work after using it as you have set width on the element on which you are setting this.
For example,
}
.title h1:after {
content:"\A";
white-space: pre;
}
Explanation
In CSS :after is used to generate some content known as a pseudo-element. The "\A" is interpreted as a line break 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.
I believe I was able to accomplish what you want with the use of flexbox. TL;DR: see snippet below.
First, I nested div.sub-title within div.title in the HTML.
Then, I turned the div.title into a flex container with display: flex, and set the flow direction to column. Adding align-items: center centers the elements within the container.
Next, I targeted the first h1 element, adding a border-top and border-bottom. You can make it however thick you like—I put 4px. If you want to add or reduce the spacing between the borders and the title, adjust the padding.
I then targeted the div.sub-title container. I gave it a position of relative and then offset its position vertically with top: -45px. You may want to adjust this value to get it centered the way you want it. I applied a zero line-height to remove the default value which is pretty tall on a heading. To adjust the spacing between the sub-title and the line on either side, add padding to div.sub-title—I used 20px. Lastly, add a background color that matches your page's background.
While this works, it'll largely depend on how much pre-defined values you're able to use (like padding and background-color).
Another thing to note is when the screen width gets too small, and the subtitle wraps, it'll look really ugly. This is due to the line-height being set to zero. To fix, you can set a min-width on div.title to prevent the entire container from going below a certain width or reset the line-height in div.sub-title at a certain breakpoint with a media query.
.title {
display: flex;
flex-flow: column nowrap;
align-items: center;
min-width: 350px;
}
.title > h1 {
display: inline;
padding: 30px 0;
border-top: 4px solid black;
border-bottom: 4px solid black;
text-align: center;
}
.sub-title {
position: relative;
top: -45px;
/* reset this w/ a media query when screen size gets too small */
line-height: 0px;
padding: 0 20px;
background-color: #fff;
}
<body>
<div class="title">
<h1>Tomorrow Or Something Longer</h1>
<div class="sub-title">
<h1>Today or something</h1>
</div>
</div>
</body>
Consider the following example where I have several inline-block elements in a container element that will potentially shrink in width to the point where the elements within it will wrap.
I would like for there to be a small bit of space between each "row" or contained elements. Using a margin-top or margin-bottom I get the space that I want. However, there is a small bit of space either on the first or last row of elements.
Is there a way to target the line wrapped elements but not the first line?
#container {
width: 10em;
background-color: blue;
}
#container > span {
display: inline-block;
padding: 0.25em;
margin: 0;
background-color: lightblue;
}
#container > span:not(:last-child) {
margin-right: 0.25em;
}
/*The following rule doesn't exist*/
#container > span:not(:first-row) {
margin-top: 0.25em;
}
<div id="container">
<span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
Is there a way to target the line wrapped elements but not the first line?
No, not as of now.
However, there is a small bit of space either on the first or last row of elements.
In most situations, you should be able to mitigate that by a negative margin on the container element, like so:
#container {
width: 10em;
margin-bottom: -0.25em;
background-color: blue;
}
#container > span {
display: inline-block;
padding: 0.25em;
margin: 0 0 .25em 0;
background-color: lightblue;
}
#container > span:not(:last-child) {
margin-right: 0.25em;
}
.test { background:red; }
<div id="container">
<span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
<div class="test">I am where I should be.</div>
(Added the red div to show that there’s no offset between it and the previous element.)
You can't target a bunch of spans as a row, especially if they're just wrapping when they don't fit on one line anymore.
You'd need to wrap the content in <div class="row"> for example. Then you could say .row:first-child { /* Custom styling */ }.
This might be possible in the future, but as it stands it can't be done.
I have two containers which are both children of a main-content div. Whenever the second container (or any for that matter) overflow i can scroll over, BUT both the divs overflow, just the content.
For instance, the image below shows the second container overflowing, but the background colors do not expand the entire way as i scroll. Iv'e tried absolute positioning, but the results are not what i need.
Also, I would like any padding to be included when scrolling. For example, is i set my padding to be padding: 0 10px i want to be able to scroll 10px more than the overflowing content (considering my div will expand?)
Here is a JSFIDDLE of the replicated issue.
UPDATE:
I can fix the issue by setting each individual div's background color and also setting the main background color, but that seems a bit unclean and I would rather have a better way to get the desired results.
This JSFIDDLE is my desired result, but there are so many "hacks" like setting font-size to 0, setting the main-content's background color, setting each div's background color, etc. I am trying to get the same result without all these workarounds.
The easy way is to use table layout.
.main-container {
display: table;
}
.container, .second-container{
display: table-row;
}
http://jsfiddle.net/afelixj/4mpue0gw/2/
Just add the display: table to .main-container class.
.main-container{
display: table
}
Try like this: Demo
.main-container {
overflow-x: auto;
color: #AAA;
background: #343434;
}
.container {
white-space: nowrap;
}
.second-container {
height: 300px;
white-space: nowrap;
background: #454545;
display:table;
width:100%;
}
You can try this CSS:-
.main-container {
overflow-x: auto;
color: #AAA;
display: table;
}
.container {
white-space: pre-wrap;
background: #343434;
display: table-row;
}
.container > div {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
}
.second-container {
min-height: 300px;
white-space: nowrap;
background: #454545;
display: table-row;
padding: 10px;
}
.second-container > div {
display: table-row;
white-space: pre-wrap;
line-height: 22px;
}
I have a list of .message whose display is table-row. Some of those messages should have a red triangle over them, at the bottom center. The element containing the triangle can't be inside a cell of the .message.
It's easy to do when the .message display is block but I can't seem to be able to do it with a table-row. As you can see in my fiddle, all the triangles are at the same wrong position and the second cell doesn't extend to the whole row (it does if I remove the .opener element).
What am I missing ?
Fiddle for the tests (and clarity)
Hover the left cells with your mouse to get why I want to have table-cell elements. To be more precise I need the whole range of positioning and dimension advantages of table-cell elements (same height for both cells, for example, and the right cell must fill the remaining space of the row).
Compatibility needed : Firefox and Chrome
You can get this layout with flexbox
FIDDLE
CSS
#b {
width:100%;
list-style: none;
}
.m {
display: flex;
align-items: center;
align-content: center;
position: relative;
background: #789;
border-top: thin solid #ccc;
}
.u {
width: 100px;
float:left;
opacity:.999;
}
.u:before
{
content: '';
width: 100px;
height: 100%;
display: block;
position: absolute;
top:0;
z-index:-1;
}
.c {
overflow: hidden;
width: calc(100% - 100px);
}
.u:hover:before, .c:hover {
background: yellow;
}
.opener {
width: 16px;
text-align: center;
cursor: pointer;
color: red;
left:0;right:0;
bottom:0;
margin: auto;
z-index: 0;
position: absolute;
}
.opener:before {
content:'▼';
display: block;
}
The problem is that table-cell, table-row and similar table-display values cannot have any positioning applied to. Just as if you are creating a table and giving positions to the td and tr.
An ugly fix is to wrap it in a div whose display is set to block like this
Reference: position - CSS | MDN