I have a little problem with a div 2 that wont go bellow div 1 (see images bellow). I am going to be continueing this on (more div going along) and because of that I don't want to split off the to smaller divs. any help would be greatly appreciated.
.large,
.small,
.long-down {
float: left;
margin: 1px;
}
.small {
width: 100px;
height: 100px;
background: gray;
}
.large {
width: 200px;
height: 200px;
background: black;
}
<div class="wrapper">
<div class="small"></div>
<div class="small"></div>
<div class="large"></div>
<div class="large"></div>
<div class="large"></div>
<div class="small"></div>
<div class="small"></div>
<div class="large"></div>
</div>
If you want a solution that works for any number and order of boxes of different sizes, Masonry (a javascript solution) might be what you are looking for.
.large,
.small,
.long-down {
float: left;
display: block;
}
.small {
width: 100px;
height: 100px;
background: gray;
margin-bottom: 1px
}
.large {
width: 200px;
height: 200px;
background: black;
float: right;
margin-top: 1px;
}
.wrapper {
width: 301px;
}
.pull-left {
width: 100px;
float: left;
margin-right: 1px;
}
<div class="wrapper">
<div class="pull-left">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
<div class="large"></div>
<div class="large"></div>
</div>
i think http://masonry.desandro.com/ can help you in this.
It works by placing elements in optimal position based on available vertical space
Related
I made a graphic header what I want to slice up and code. I have planned where to slice the image but am unsure how to go about coding it. HERE is what the header looks like. I can see how I would code it using two tables side-by-side but am wondering how I would code it using DIVs or simply as one table (without adding extra cells). It's complicated for me since each cell is a different size and cell spans are irregular. Any help would be greatly appreciated!
Since you don't need your boxes to scale, I would just go with a bunch of hard coded height/width divs. Here is an example of what I mean:
.wrapper{
font-size: 0;
float: left;
margin-left: 5px;
}
.a{
height: 34px;
width: 154px;
}
.b, .c, .d{
display: inline-block;
height: 106px;
}
.b{
width:42px;
}
.c{
width: 88px;
}
.d{
width: 24px;
}
.e{
height: 60px;
}
.f{
height: 107px;
width:346px;
}
.g, .h, .i, .j, .k{
display: inline-block;
height: 46px;
}
.g{
width: 54px;
}
.h{
width: 38px;
}
.i{
width: 124px;
}
.j{
width: 86px;
}
.k{
width:44px;
}
.l{
height: 47px;
}
.wrapper div:nth-child(1){
background: red;
}
.wrapper div:nth-child(2){
background: blue;
}
.wrapper div:nth-child(3){
background: green;
}
.wrapper div:nth-child(4){
background: yellow;
}
.wrapper div:nth-child(5){
background: purple;
}
.wrapper div:nth-child(6){
background: grey;
}
.wrapper div:nth-child(7){
background: black;
}
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
<div class="wrapper">
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
</div>
And a codepen
If you want to use div instead of tables here then you can use CSS display:table property, for eg:
<div class="wrapper" style="display:table">
<div class="c1" style="display: table-cell; width:154px; height: 34px">
<!-- Same way you can carry put your other block starting with display:table -->
</div>
<div class="c2" style="display: table-cell; width:346px; height:107px">
<!-- Same way you can carry put your other block starting with display:table -->
</div>
</div>
I have added the css property inline for demonstration purpose. Taking them out to a separate file should save some of your time!
Note: here table and table-cell property act as html table elements. Check out this post for more on CSS display table property
I have these divs with variable content created dynamically, they are all governed by the same CSS rules. I want them to be placed in 2 columns with no space in between them, I tried using float: left/right but that still leaves space in the top and bottom.
This is a sample code (you can also see it on JSFiddle):
.posts{
width: 100%;
}
.one{
background-color: red;
height: 100px;
width: 40%;
float: left;
}
.two{
background-color: blue;
height: 120px;
width: 40%;
float: left;
}
<div class="posts">
<div class="one">
</div>
<div class="two">
</div>
<div class= "two">
</div>
<div class ="one">
</div>
</div>
So in that example, the right div boxes are fine, but they create a space between the top left box and the bottom div. I tried looking up some simple examples, but all of them suggest modifying the divs separately with overflow: hidden, and other options.
What is the best way to do it with all the divs sharing the same CSS?
Warning: If the browsers you want to support do not support columns, this will not work and may still not be the right solution for you:
What you are trying to do is create a Masonry style layout.
This should do what you want:
.container {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 0;
-moz-column-gap: 0;
-webkit-column-gap: 0;
width: 80%;
font-size: 0;
}
.container div {
display: inline-block;
width: 100%;
margin: 0;
font-size: 12px;
color: white;
}
.container .one {
height: 100px;
background-color: red;
}
.container .two {
height: 120px;
background-color: blue;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="two">two</div>
<div class="one">one</div>
</div>
Does this accomplish what you are trying to do?
.posts{
width: 100%;
}
.one,
.two {
height: 100px;
width: 40%;
float: left;
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
<div class="posts">
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="one"></div>
</div>
Make your code like this,
<!DOCTYPE html>
<html>
<head>
<style>
.posts{
width: 50%;
float:left;
}
.one{
background-color: red;
height: 100px;
width:100%;
}
.two{
background-color: blue;
height: 120px;
width: 100%;
}
</style>
</head>
<body>
<div class="posts">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="posts">
<div class="two"></div>
<div class="one"></div>
</div>
</body>
</html>
Updated based on comments
I'm trying to create div sections on a full sized page by making containers that are 30% of the width. Within those, I plan to have 2 or 3 div sizes aligned within them. I have a row with a large box that occupies 100% of the height, and a portion of the width, and then a box that's exactly half of the size. I'd like to have all of those half-size boxes be in the same row as the larger box to create a nice stack. I'm assuming it's an issue of size vs position, but I haven't had much luck and I'm over-thinking the issue.
Fiddle: https://jsfiddle.net/as9hud4k/10/
HTML:
<div class="content_section">
<div class="content_thirdsize">
<div class="content_thirdsize_inner_row">
<div class="content_thirdsize_inner_large"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
</div>
</div>
</div>
CSS:
.content_thirdsize
{
width: 500px;
height: 500px;
display: inline-block;
text-align: center;
vertical-align: top;
background-color: rgba(83, 35, 128, 0.2);
}
.content_thirdsize_inner_row
{
width: 500px;
height: 105px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
margin: 2px;
}
.content_thirdsize_inner_large
{
position: relative;
width: 100px;
height: 100px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
border: 1px dashed #000;
vertical-align: left;
}
.content_thirdsize_inner_small
{
position: relative;
width: 50px;
height: 50px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
border: 1px dashed #000;
vertical-align: right;
}
I suspect the math may need to be tweaked to account for spacing but flexbox can do a lot of the work here.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
display: flex;
margin: auto;
}
.content-wrap {
display: flex;
flex-wrap: nowrap;
padding: 5px;
background: orange;
}
.small-wrap {
display: flex;
flex-wrap: wrap;
width: 350px;
}
.large,
.small {
width: 100px;
height: 100px;
background: rebeccapurple;
border: 2px dotted white;
}
.small {
width: 50px;
height: 50px;
}
<section>
<div class="content-wrap">
<div class="large"></div>
<div class="small-wrap">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div </div>
</div>
</section>
Codepen Demo
I would recommend using position and then align the divs using left, right, top, bottom. Pick a position setting that makes sense in your mind for moving the div and then fiddle with it's position until they line up as you would like.
As paulie_D said in the comments don't use IDs multiple times, they are supposed to be unique. You want to be using a class to apply the same style on multiple objects. My general rule is that classes are for applying style and IDs are for identifying a specific object on the page.
Probably a fairly basic solution to this, but I can't seem to figure it out... have set up a jsfiddle to demonstrate:
http://jsfiddle.net/AxKq8/1/
HTML
<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.box {
width: 50%;
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}
I have 3 divs. What I'd like to do is have the top of the green div align with the top of the blue div.
As you can see I tried floating the first two divs left, and the third div right. That didn't work, so tried a relative positioning. Also tried using clear aswell, but it's eluding me!
Any suggestions on how to make this work?
Thanks!
Jon
Positioned the third div absolute with top:0
#box-3 {
height: 300px;
float:right;
background-color: green;
position: absolute;
top:0px;
right:0px;
}
Working CODE:JSFIDDLE
You can put the blue and red box in a container, and then a green box in another container. Float the two containers rather than the boxes.
http://jsfiddle.net/AxKq8/9/
HTML
<div class="wrapper">
<div class="container">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
</div>
<div class="container">
<div id="box-3" class="box">
</div>
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.container {
float: left;
width: 50%
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
background-color: green;
}
Give this a try: JSFiddle
HTML:
<div class="wrapper">
<div class="box-group box">
<div id="box-1" class="box2"></div>
<div id="box-2" class="box2"></div>
</div>
<div class="box-group box">
<div id="box-3" class="box2"></div>
</div>
</div>
CSS:
.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }
I created columns with the .box-group class, I grouped the first two items into the first column div so the stacking and floating will appear properly.
After so long I have noob question.
I do not understand why this problem happens
In Example 1, the expected result is correct, apply the margin between parent (gray) and child (red).
http://jsfiddle.net/48nTD/1/
HTML
<div class="parent odd">
<div class="block"></div>
</div>
<div class="parent even">
<div class="block"></div>
</div>
CSS
.parent{
height: 200px;
padding: 20px;
}
.odd{
background: #dddddd;
}
.even{
background: #bbbbbb;
}
.block{
width: 40%;
height: 40px;
background: red;
margin-top: 20px;
margin-left: 60px;
}
In Example 2, the result is not as expected, not apply the margin between parent (dark-gray) and your child (green)
Apply the margin to child, but visually down the parent with block child.
http://jsfiddle.net/GUYjJ/
HTML
<section class="row">
<div class="block left"></div>
<div class="block right"></div>
</section>
<section class="row features">
<div class="block"></div>
</section>
CSS
.row{
height: 540px;
}
.block{
height: 320px;
margin-top: 100px;
}
.left, .right{
width: 40%;
}
.left{
background: red;
float: left;
}
.right{
background: blue;
float: right;
}
.features{
background: #454545;
}
.features .block{
background: green;
width: 60%;
}
I do not understand the reason for this behavior.
Best Regards.
Add some padding to .features
.features{padding-top:1px;}
DEMO here.