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>
Related
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.
So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:
But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form.
I want the boxes to be next to each other, with about an inch of separation between them.
I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:
I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.
http://jsfiddle.net/kkobold/qMQL5/
#header {
width: 100%;
background-color: red;
height: 30px;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#first {
width: 100px;
float: left;
height: 300px;
background-color: blue;
}
#second {
width: 200px;
float: left;
height: 300px;
background-color: green;
}
#clear {
clear: both;
}
<div id="header"></div>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>
This will work
<div style="width:800px;">
<div style="width:300px; float:left;"></div>
<div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>
<div style="display: inline">
<div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
<div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div>
I am just giving the code for two responsive divs side by side
*{
margin: 0;
padding: 0;
}
#parent {
display: flex;
justify-content: space-around;
}
#left {
border: 1px solid lightgray;
background-color: red;
width: 40%;
}
#right {
border: 1px solid lightgray;
background-color: green;
width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="parent">
<div id="left">
lorem ipsum dolor sit emet
</div>
<div id="right">
lorem ipsum dolor sit emet
</div>
</div>
</body>
</html>
This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.
HTML
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="menu">Email/Password</div>
</header>
<div class="first-box">
<p>Video Explaning Site</p>
</div>
<div class="second-box">
<p>Sign up Info</p>
</div>
<footer>
<div>Website Info</div>
</footer>
</div>
CSS
.container {
width:900px;
height: 150px;
}
header {
width:900px;
float:left;
background: pink;
height: 50px;
}
.logo {
float: left;
padding: 15px
}
.menu {
float: right;
padding: 15px
}
.first-box {
width:300px;
float:left;
background: green;
height: 150px;
margin: 50px
}
.first-box p {
color: #ffffff;
padding-left: 80px;
padding-top: 50px;
}
.second-box {
width:300px;
height: 150px;
float:right;
background: blue;
margin: 50px
}
.second-box p {
color: #ffffff;
padding-left: 110px;
padding-top: 50px;
}
footer {
width:900px;
float:left;
background: black;
height: 50px;
color: #ffffff;
}
footer div {
padding: 15px;
}
You can do it in three ways:
Float Method
<div class="float-container">
<div class="float-child">
<div class="green">Float Column 1</div>
</div>
<div class="float-child">
<div class="blue">Float Column 2</div>
</div>
</div>
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
Flexbox Method
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
CSS Grid Method
<div class="grid-container">
<div class="grid-child purple">
Grid Column 1
</div>
<div class="grid-child green">
Grid Column 2
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
Source
Have a look at CSS and HTML in depth you will figure this out. It just floating the boxes left and right and those boxes need to be inside a same div. http://www.w3schools.com/html/html_layout.asp might be a good resource.
Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):
<style>
.wrapper {
width: 980px;
}
</style>
<body>
<div class="wrapper">
//everything else
</div>
</body>
As far as the content boxes go, I would suggest trying to use
<style>
.boxes {
display: inline-block;
width: 360px;
height: 360px;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.