I have a set of divs with this layout:
div.post_summary {
clear: none;
width: 170px;
display: inline-block;
float: left;
margin: 5px;
background-color: #FF5900;
}
It now looks like:
But I want it to look like:
The order of the divs in no way matters. How can I do this?
Since order doesn't matter, you can do this with CSS columns:
http://codepen.io/cimmanon/pen/CcGlE
div.container { /* container holding all of your `div.post_summary` elements */
columns: 20em; /* desired width of the columns */
}
div.post_summary {
margin: .5em;
background-color: #CCC;
}
div.post_summary:first-child {
margin-top: 0;
}
Make sure you check http://caniuse.com/#feat=multicolumn to see which prefixes you need.
Related
How would you go about creating something like this:
The idea is you've got a horizontal scrollable section, and wanting to show the scrollbar underneath. But, you only want the scrollbar to be the width of the main container, centered to page.
Linked below a jsfiddle of how I've approached it, but no luck with trying to keep the scrollbar only centered. Tried using a max-width, but doesn't seem to have any affect. Any ideas?
.scroll-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 24px;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 16px;
}
&::-webkit-scrollbar-track {
background: #eee;
// you'd think max-width or something here would be the solution
}
&::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
border: 4px solid #eee;
}
}
.scroll-wrapper > *:first-child {
margin-left: 80px;
}
.scroll-item {
flex: 0 0 auto;
margin-right: 16px;
}
https://jsfiddle.net/tzdcay9r/1/
I solved it… can use margins on the scrollbar-track 🤦♂️
https://jsfiddle.net/8snuamhv/1/
&::-webkit-scrollbar-track {
background: #eee;
margin-left: 80px;
margin-right: 80px;
}
Or if you want something a bit more dynamic, for example to match a container size, you can use a calc() function to work out the margin values.
$containerSize: 1120px;
&::-webkit-scrollbar-track {
background: #eee;
border-radius: 20px;
margin-left: calc((100vw - $containerSize) / 2);
margin-right: calc((100vw - $containerSize) / 2);
#media (max-width: $containerSize) {
margin-left: 16px;
margin-right: 16px;
}
}
My template is based on this. To keep the footer 'sticky', the following CSS rules are used:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS -------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
However, when I include a table the pagination overlaps the footer. I think this is due to the way the DOM rules work.
There is a fix using z-index:
.footer {
z-index: 4;
}
Is that the best approach?
If you take a look here + change the 'Show entries to 100' you'll see what I mean.
Using z-index on the footer is the solution.
.footer {
z-index: 2;
}
Here's what I'm trying to achieve:
Here's a fiddle showing the styling I have, (making use of display: table as I don't want to fix the width of each item and it should be responsive).
I'm close, here's the styling (SASS for brevity) and how it looks:
.nav--main {
ul {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
li {
display: table-cell;
border: 1px solid #333;
text-align: center;
line-height: 1.2;
vertical-align: top;
overflow: hidden;
}
}
a {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 200%;
padding: .5em;
background-color: rgba(105,158,197,1);
color: #fff;
text-decoration: none;
}
}
But I cannot get the a to take up the full height and remain vertically-centered in the middle. This fiddle shows one kinda hacky attempt, but only by setting vertical-align to top.
I don't want to:
set a fixed height
place the background-color on the li rather than the a: I hate when the clickable area doesn't take advantage of all available space
I don't know, in which case this might break, but a somewhat dirty trick could be this:
Updated CSS parts only
ul {
overflow: hidden;
}
a {
margin: -5em 0;
padding: 5.5em 0;
}
Demo
Try before buy
add this:
background: rgba(105,158,197,1);
into ul
That set the background color into the same as your link.
I have a bunch of divs inside a container that is equally spaced from the right as well as from the bottom. (i.e margin-right and margin-bottom are the same)
Here is my jsfiddle below:
http://jsfiddle.net/wYCzJ/1/
Here is my css code:
.container {
width: 100%;
height: auto;
display: inline-block;
}
.wrapper {
position: relative;
float: left;
width: 25%;
}
.box {
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 1px solid;
border-color:#DDD;
padding: 0.5em;
height: 150px;
}
.name{
width: 95%;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.result {
text-align: right;
margin-top: 0.5em;
font-weight: bold;
margin-right: 0.75em;
}
.result-type {
float:left;
display:inline;
font-size: 1.1em;
display: inline;
}
.result-value {
font-size: 1.5em;
display: inline;
}
.no_data {
font-size: 1.2em;
color: darkgray;
}
.date {
position: absolute;
bottom: 1em;
color: gray;
}
Everything works fine as expected, except that the last div box has extra some extra spacing towards the right ( Test 5 box and Test 7 box in this case)
I kinda need the same spacing all around. Is there a workaround for this?
if you add:
body {
margin: 0;
padding: 0;
}
you will have only 5px from the right
it's up to you to make div container to margin 5px from left and top
i managed to twick it:
body {
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-left: 0.5em;
}
tested it in Chrome and FF - http://jsfiddle.net/elen/wYCzJ/3/
found and adopted this version - jsfiddle.net/elen/5CJ5e/131 - see if it works for you
please notice combination of text-align: justify;, font-size: 0; and heights for both outer and inner boxes. also use of <span class="stretch"></span> for 100% width
Your probleme is simple, the body have a natural margin.
body{margin-right:0px}
That solve your probleme, but it's a bit wierd to have a bodywith only the margin-right at 0...
The overall container has spacing for its top, bottom, left, and right. Your individual boxes only have spacing on the bottom and right. The reason you are seeing "extra" spacing on the right is because the spacing for the individual box and the overall container are being added together.
A possible sollution with nth-child. This removes the margin of every 4th .box element.
.wrapper:nth-child(4n) .box{
margin-right: 0;
}
http://jsfiddle.net/wYCzJ/5/
Have a look at browser support of nth-child at caniuse.
So I have two elements floated next to each other and one has a set width and the other needs to be a percentage so that when the window/browser is resized the content will flow with it. However I am having trouble keeping the content floated next to each other when the window size is smaller than certain ratio.
Here is my css code:
.box {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
}
p {
width: 95%;
float: left;
margin: 0;
padding: 0;
}
Is there a way around this? Here is my fiddle so you can see what is going on.
My example
If you make the size smaller you will see the P tag drops down below the box.
If the box is a fixed width you can use the following styles:
.item {
padding-left: 60px;
}
.box {
width: 50px;
height: 50px;
float: left;
margin-left: -60px;
background-color: blue;
}
p {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
http://jsfiddle.net/3QhzS/1/
otherwise you will need to add a little bit of jquery to it to add styles on the fly:
http://jsfiddle.net/3QhzS/6/
If you don't know the width of the div.box (as you stated in comments) then you can use position:relative to the p tag which will do the trick.
p{
position:relative;
/* anchoring top, left and right sides */
top:0px;
right:0px;
left:0px;
margin:0;
padding:0;
}
Working Fiddle
Working Fiddle(with two div's)