I need some help with a problem.
There is a list in the block certain height. Height more than the height of the list, so it is displayed in 2 columns.
I did not get to do so at first filled the first column of the list items, then the second. it looks like this
css
.wrap{
}
.wrap ol{
height: 290px;
width: 500px;
display: block;
outline: 1px solid red;
overflow: hidden;
}
.wrap ol li{
width: 50%;
float: left;
}
An easy way is to use CSS multi-column.
.wrap{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
See http://jsfiddle.net/aC4Nc/
To increase compatiblity with old browsers, use this polyfill
Related
I am modifying a pinterest clone script and working on replacing jquery masonry with css masonry, i think have added css values properly, but the masonry is still breaking a bit, can you guys please take a look and let me know what i might be doing wrong?
CSS thats making the masonry work is listed below,
Code:
#grid-container {
max-width:1200px;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
margin: 176px auto 0;
}
#grid-container > .post {
width: 290px;
margin: 0 5px 0;
position: relative;
display: block;
height: auto;
}
Live URL : http://labs.imvges.xyz/
Regards,
Jqn
Setting column-count to 4 will ensure there are always 4 columns, instead of showing the max number of columns based on the post card widths. Use column-width instead. See below for that change and a few others.
#grid-container {
max-width:1200px;
-moz-column-width: 288px;
-webkit-column-width: 288px;
column-width: 288px;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
margin: 176px auto 0;
}
#grid-container > .post {
width: 100%;
margin: 0 5px 0;
display: inline-block;
height: auto;
}
I'm trying to indicate the active link, using a triangle-shaped CSS "cut-out" (the triangle is cut out of the white header.
http://codepen.io/Goatsy/pen/xVvRmZ
/*
.container {
width: 1200px;
}
*/
How do I "cut out" the red triangle from both the contained header and full-width background (red) block? I need to cut out the triangle to expose underlying photo.
The header works great, but as soon as the full-width red block is applied to the background layer of contained header, it "fills in" the triangle cut-out.
UPDATE:
I created a flexbox within a flexbox. Unfortunately, the contained header is not exactly 1200px, and this will be difficult to apply to the overall layout.
http://codepen.io/Goatsy/pen/xVvRmZ
.wrapper-whole {
display: flex;
flex-direction: row;
height: 134px;
margin: auto;
}
.flexy {
background: #f00;
flex: 2;
height: 134px;
}
.wrapper { /* wraps contained header navbar */
display: flex;
flex-direction: row;
height: 134px;
border-left: 15px solid #fff;
border-right: 15px solid #fff;
max-width: 1200px;
margin: auto;
flex: 6;
}
Instead of cutting it out from a background, you could create the illusion of a background by making red elements on each side of the white header using :before and :after pseudo-elements.
In http://codepen.io/anon/pen/MyNpdX, I added the following CSS:
.wrapper {
/* the stuff that was already here */
position: relative;
}
.wrapper:after, .wrapper:before{
content: "";
background-color: #f00;
width: 4000px;
position: absolute;
height: 134px;
top: 0;
}
.wrapper:before{
margin-right: 15px;
right: 100%;
}
.wrapper:after{
left: 100%;
margin-left: 15px;
}
Too many questions:
let me try to answer the ones I've understood.
I'll keep editing this answer as I go:
to contain something: you can have the following parent div
.parent {
max-width: 1200px;
overflow: hidden;
}
this way a child red div, would not appear outside parents constraint.
you can achieve css-triangles as:
.arrow-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
<div class="arrow-up"></div>
p.s.: you're codepen is so far behind the layout in question, that it's hard to hands-on fix the problem
Place the contained flexbox header, inside of another flexbox.
Place one (red) block on left of header and one (red) block on right.
Create max-width for white header:
#media screen and (min-width: 480px) {
.wrapper { /* wraps contained header navbar */
min-width: 1200px;
}
}
http://codepen.io/Goatsy/pen/xVvdKN
I have this code:
<div style="margin: 0px; padding: 0px;">
<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; left: 0; margin-bottom: 10px; position: relative;">
....
</div>
<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; right: 0; margin-bottom: 10px; position: relative;">
....
</div>
</div>
My end goal is to have two boxes each sharing 50% of width with margin in-between them.
Instead they are shown below each other which I do not want. They appear not to respect their designated position values. (I even set width to only 40% for both, so it was not an issue of all space used.)
For reference: I chose not to use float since I don't want them to realign underneath each another. I chose not to use table display since I would like IE7 compatibility. I have never done much CSS, so my question is hopefully simple to solve (crossing fingers)
As others have mentioned, you are missing either float: left (remove top/right/bottom/left values) or position: absolute.
If you want width to be fluid but padding to be fixed (or vice-versa), then you need width: 50% with box-sizing: border-box. This makes the padding part of that 50%.
If you want width and padding to both be fluid, this trick isn't necessary. Just use percentage measurements for both so the total is 50% (e.g., width: 48%; padding: 1%).
You really just need to float your inner divs, to make it all a bit easier, add box-sizing attribute.
Lets say having this HTML:
<div class="box"></div>
<div class="box"></div>
And then just add something like this:
.box {
float: left;
width: calc(50% - 5px);
margin-right: 5px;
padding: 8px;
border: 1px solid #aaaaaa;
box-sizing: border-box;
}
.box:last-child {
margin: 0 0 0 5px;
}
By using calc(), you have to subtract the margin of each .box. And the use of box-sizing property is to avoid that border and padding were added to the width, which is the default behavior on the CSS box model. You should have a look on caniuse to see compatibilities and the use of vendor prefixes.
There're really more than a way to do the same thing. But I think this one is a very solid way to achieve your goal.
http://jsfiddle.net/gVwar/
I believe this fiddle solves your problem. Error being you didn't float the divs.
Block level elements will never be placed adjacent to one another when not floated, unless when positioned absolutely or fixed.
Note: If you want to position your elements with top, left & right properties, you'll have to set their position: absolute.
Are you looking for something like this?
Check the demo out at the link above.
<div class="box1">X</div>
<div class="box2">X</div>
CSS
* {
margin: 0;
padding: 0;
}
.box1 {
width: 48%;
background-color: white;
border:1px solid black;
}
.box2 {
width: 48%;
background-color: white;
border:1px solid black;
}
.box1, .box2 {
display: inline-block;
margin: auto;
}
#media screen and (max-width: 300px){
.box1, .box2 {
width: 46%;
float: right;
display: inline-block;
margin-right: 1%
}
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.
Hey, I am guessing that this is probably fairly trivial, but I am having difficulty finding an answer or figuring it out nonetheless.
I'm trying to create a grid of colored squares with arbitrary spacing between them.
This in itself is easy to do, especially because I need only nine squares. But while
I look at my completed code, I cannot help but feel there is a far more simple and efficient way to accomplish this.
At the moment, I have nine different IDs declared in my css, one for each square.
div.container{
position:relative;
left:50px;
top:50px;
background-color:rgb(45,45,45);
height:300px;
width:300px;
}
#square{
position:absolute;
background-color:rgb(52,82,222);
left:20px;
top:20px;
height:80px
width:80px
#square2{
position:absolute;
background-color:rgb(58,82,22);
left:110px;
top:20px;
height:80px;
width:80px;
etc etc etc
What I would like to do is find a more efficient way to do this.
Thanks for the help!
You can use a class for the squares that share a property:
.square {
position: absolute;
width: 80px;
height: 80px;
}
Is there a specific reason you're absolutely positioning them though? Sounds like a job better suited for floats.
div.container {
width: 240px;
}
.square {
float: left;
width: 80px;
height: 80px;
}
Assuming that the inner squares are divs, there are no other divs inside your container, and each inner div should be the same width and height, this is what I'd do:
.container {
position: relative;
left: 50px;
top: 50px;
background: rgb(45,45,45);
height: 300px;
width: 300px;
}
.container > div {
position: absolute;
background-color: rgb(52,82,222);
height: 80px;
width: 80px;
}
#square1 {
left: 20px;
top: 20px;
}
#square2 {
left: 110px;
top: 20px;
}
..
If you need separate top and left properties for each div, then you have no choice but to use ids.
You can avoid having to add a class thanks to using .container > div, which selects all div elements that are direct children of .container.
The HTML would look like this:
<div class="container">
<div id="square1"></div>
<div id="square2"></div>
..
</div>
Why not give all of the squares the same class and apply something like
.square
{
display: inline-block;
width: 80px;
height: 80px;
zoom: 1;
*display: inline /* for IE */
}
That should make all of the blocks wrap nicely without having to add styles for each individual.