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.
Related
I have the problem that I have 3 divs and when one div is longer than the other div, it creates some whitespace.
I would like to have the whitespace gone and the divs connect.
This is what I have now:
.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: left;
margin: 5px;
}
.main{
width: 220px;
}
.info{
background: orange;
height: 200px;
width:100px;
float: left;
margin: 5px;
}
<div class='main'>
<div class='info'>
to this one
</div>
<div class='two'>
</div>
<div class='two'>
this one should be up
</div>
<div class='two'>
</div>
<div class='one'>
</div>
</div>
The only reason I have these classes is because I want to show an example of my problem, In reality all divs have the same class.
Could anyone solve the problem for me?
As you can see in my image, the bottom div is not connected to the one above it. all divs have float: left;
That is not possible, when the class .two is floating left.
You have to use float:right for the class .two instead.
.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;
}
<div class='main'>
<div class='one'>
to this one
</div>
<div class='two'>
</div>
<div class='one'>
this one should be up
</div>
</div>
You will need to float the .two class to the right.
float: right;
Hope this helps :>
.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;
}
<div class='main'>
<div class='one clearfix'>
to this one
</div>
<div class='two'>
</div>
<div class='one'>
this one should be up
</div>
</div>
Add float:right to .two div element
I would like to create the following responsive grid structure, taking in mind that element 3 and 5 are not always present and they have variable height.:
grid image
I've tried with floating elements, but element 2 get's into the second column:
https://jsfiddle.net/a2tbbs2b/2/
CSS:
.panel{
background: white;
box-sizing: border-box;
overflow: auto;
}
.panel::after {
content: "";
clear: both;
display: table;
}
.section{
width: 60%;
float: right;
text-align: center;
}
.section.left{
float: left;
width: 40%;
}
.one{
background: green;
height: 80px;
}
.two{
background: blue;
height: 70px;
}
.three{
background: red;
height: 20px;
}
.four{
background: brown;
height: 20px;
}
.five{
background: yellow;
height: 50px;
}
HTML:
<div class="panel">
<div class="section three">3</div>
<div class="section left one">1</div>
<div class="section four">4</div>
<div class="section left two">2</div>
<div class="section five">5</div>
</div>
I'm trying not to duplicate HTML to create this layout.
Any help is welcome. Thank you for your time!
#main {
width: 98vw;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div{ margin:5px;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-3{flex:3;}
<div id="main">
<div class='flex-2' style="background-color:coral;">RED</div>
<div class='flex-3' style="background-color:lightblue;">BLUE</div>
<div class='flex-1'></div>
<div class='flex-1' style="background-color:lightgreen;">Green div with more content.
</div>
you can add the content in their specific containers .I am unable to understand your numbering scheme , but you can add content likewise.
Read More
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 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
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.