I'm trying to create a css grid system with six columns. You can see the output of the html and css at this jsfiddle. The problem appears to be that the columns are overflowing the rows they are supposed to be contained in. For example, even though a row should be able to hold six 'size 1' columns, the sixth column in my example is spilling over into another row. How would I fix this so that the desired number of columns for each row doesn't exceed the width of the row?
<div class="grid-container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
</div>
css
.grid-container{
width: 100%;
max-width: 1200px;
}
/*-- cleafix hack -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- gutter -- */
padding: 12px;
background-color: #FFDCDC;
}
.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%; }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; }
.outline, .outline *{
outline: 1px solid #F6A1A1;
}
/*-- some extra column content styling --*/
[class*='col-'] > p {
background-color: #FFC2C2;
padding: 0;
margin: 0;
text-align: center;
color: white;
}
I believe that you're looking for:
div {
box-sizing:border-box;
}
jsFiddle example
See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Related
I'm having issues with a layout like this:
.wrapper {
clear: both;
background-color: #ccc;
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
width: 100px;
float: left;
background: lightblue;
}
.main {
margin-left: 100px;
background: lightgreen;
}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="wrapper">
<div class="top">
<div class="box">top</div>
</div>
<div class="side">side</div>
<div class="main">main</div>
</div>
The .main and .side elements need to be aligned. As you can see in the above snippet, everything is fine unless the .top element has no height in which case the margin-top rule causes them to be skewed. All of the following "fix" the issue but each has a drawback:
adding border to .wrapper (I might be able to live with a transparent border but I really don't like this since it feels like a dirty hack and I'd rather not add a border. For some reason the border needs to have a width of at least 1px or this doesn't work)
.wrapper {
clear: both;
background-color: #ccc;
border: 1px solid #000;
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
width: 100px;
float: left;
background: lightblue;
}
.main {
margin-left: 100px;
background: lightgreen;
}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
adding overflow: hidden to .wrapper (this hides parts of some elements and causes others to fall in the wrong place)
adding overflow: auto to .wrapper (this adds scroll bars in some scenarios)
Those last two are not apparent in my snippet but in the real world application they cause problems as mentioned here.
I have a strong suspicion the issue is related to Why doesn't the height of a container element increase if it contains floated elements? and CSS container doesn't stretch to accommodate floats but I've tried many of those suggestions and none seem to quite solve the issue - perhaps because one of my divs is floated and the other is not.
Since this is part of a large application, I don't want to drastically change the layout, just have some css that will keep .main and .side aligned regardless of the content before those elements.
You can make the main element to be inline-block and use calc to set the width. This shouldn't affect your layout a lot and you will get the correct output:
.main {
width:calc(100% - 100px);
display:inline-block;
background: lightgreen;
}
Full code:
.wrapper {
background-color: #ccc;
clear: both;
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
width: 100px;
float: left;
background: lightblue;
}
.main {
width:calc(100% - 100px);
display:inline-block;
background: lightgreen;
}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="wrapper">
<div class="top">
<div class="box">top</div>
</div>
<div class="side">side</div>
<div class="main">main</div>
</div>
Another hacky idea is to make sure your top element is never empty:
.top:empty {
font-size:0;
}
.top:empty::before {
content: "\80"; /* a random character */
}
Full code
.wrapper {
background-color: #ccc;
clear: both;
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
width: 100px;
float: left;
background: lightblue;
}
.main {
margin-left: 100px;
background: lightgreen;
}
.top:empty {
font-size:0;
}
.top:empty::before {
content: "\80"; /* a random character */
}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="wrapper">
<div class="top">
<div class="box">top</div>
</div>
<div class="side">side</div>
<div class="main">main</div>
</div>
You can also consider the same trick but using a pseudo element on the main wrapper:
.wrapper::before {
content: "\80"; /* a random character */
display:block;
font-size:0;
}
Full code
.wrapper {
background-color: #ccc;
clear: both;
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
width: 100px;
float: left;
background: lightblue;
}
.main {
margin-left: 100px;
background: lightgreen;
}
.wrapper::before {
content: "\80"; /* a random character */
display:block;
font-size:0;
}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="wrapper">
<div class="top">
<div class="box">top</div>
</div>
<div class="side">side</div>
<div class="main">main</div>
</div>
You can also make the wrapper inline-block with a width equal to 100% and it will behave almost the same as a block element:
.wrapper {
background-color: #ccc;
display:inline-block;
width:100%;
vertical-align:top; /* avoid some unwanted white space issue*/
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
width: 100px;
float: left;
background: lightblue;
}
.main {
margin-left: 100px;
background: lightgreen;
}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="wrapper">
<div class="top">
<div class="box">top</div>
</div>
<div class="side">side</div>
<div class="main">main</div>
</div>
For the explanation, you are facing a margin collpasing issue like described in the specification:
Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)
both belong to vertically-adjacent box edges, i.e. form one of:
top margin of a box and top margin of its first in-flow child
You can do this much more elegantly with grid. Here is the grid code:
.wrapper {
display: grid;
grid-template-areas:
"top top"
"side main";
grid-template-columns: 100px 1fr;
}
.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}
Notice how many other elements I was able to comment out and still keep the desired layout.
.wrapper {
/*clear: both;*/
background-color: #ccc;
}
.wrapper+.wrapper {
margin-top: 50px;
}
.side,
.main {
height: 100px;
padding: 10px;
box-sizing: border-box;
/*margin-top: 20px;*/
}
.box {
padding: 10px;
}
.top {
background: yellow;
}
.side {
/*width: 100px;
float: left;*/
background: lightblue;
}
.main {
/*margin-left: 100px;*/
background: lightgreen;
}
.wrapper {
display: grid;
grid-template-areas:
"top top"
"side main";
grid-template-columns: 100px 1fr;
}
.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}
<div class="wrapper">
<div class="top"></div>
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="wrapper">
<div class="top">
<div class="box">top</div>
</div>
<div class="side">side</div>
<div class="main">main</div>
</div>
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 have the following problem on a website i am building:
3 columns of equal height and 1/3 width but on the last column there is a small white gap on the right hand side. I cant figure out why, here is what I'm talking about:
enter image description here
See the white line by the right hand side of the blog image.
The code I'm am using for the 1/3rd column is:
.thirdBox {
float: left;
width: 33.33%;
width: calc(100% / 3);
padding: 20px 40px;
box-sizing: border-box;
min-height: 400px;
display: table;
}
and the background images:
.thirdBox:nth-of-type(3) {
background: url("imagelinkhere...") no-repeat 50% 50%;
background-size: cover;
}
The issue is that 100%/3 is 33.33% in most browsers, not quite the exact width you want it to be.
Instead of using calc() to find each table's width, I would use display:flex; on the parent of all three elements you want to be in one row.
This is the best I can help you with without any HTML structure. Please post that and I may be able to help you more.
.parentElement{
display:flex;
}
.firstBox, .secondBox, .thirdBox {
padding: 20px 40px;
flex:1;
}
.firstBox{
background:blue;
}
.secondBox{
background:red;
}
.thirdBox{
background:green;
}
<div class="parentElement">
<div class="firstBox"></div>
<div class="secondBox"></div>
<div class="thirdBox"></div>
</div>
Here is a solution using display: table:
<div class="row">
<div class="col">
<div class="col-inner">
<span>Menu</span>
</div>
</div>
<div class="col">
<div class="col-inner">
<p>Some text here</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<span>Blog</span>
</div>
</div>
</div>
Css:
.row {
background-color: #999;
}
.row:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 33.33%;
min-height: 400px;
}
.col-inner {
display: table;
width: 100%;
min-height: 400px;
box-sizing: border-box;
padding: 20px 40px;
}
.col:first-child,
.col:last-child {
background-color: yellow;
}
.col-inner span,
.col-inner p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
I need to perform a dynamic grid system like this:
Each section is an article that contains an image, a title and a link/button to that article.
The problem is that each section is loaded dynamically and i only have the html of the section so i need to put each section on the correct position dynamically from the CSS. The one i know is that there are 5 sections.
The html code of each section and the container of all the sections is this:
<section class="scroll">
<!-- ARTICLES -->
<!-- ARTICLE -->
<div class="article-content">
<img class="article-image" src="${item.imgPath}" />
<div class="article-texts">
<h1 class="article-title">${item.title}</h1>
<a class="article-button" href="${item.link}.html" role="button">Read Article ></a>
</div>
</div>
<div class="clear"></div>
<!-- END ARTICLE -->
<!-- END ARTICLES -->
</section>
If you have control over the dimensions of your sections, you can use a fixed width container and float the sections inside that. Clear the float on the fourth section.
Example Fiddle: http://jsfiddle.net/abhitalks/mbuf9957/3/
Example Snippet:
* { box-sizing: border-box; padding: 0; margin:0; }
div { width: 380px; overflow: hidden; }
section { border: 1px solid #666; float: left; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 120px; }
section:nth-child(3) { width: 120px; height: 120px; }
section:nth-child(4) { width: 120px; height: 120px; clear: left; }
section:nth-child(5) { width: 240px; height: 120px; }
<div>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</div>
Since you have tagged this as CSS3, I think Flexbox would be an option. You could set display:flex on the parent and then have percentage widths for each box's flex-basis and set the flex-grow property to the amount of space, relative to other boxes, you want them to take up in the container and set flex-shrink to 0 since you don't need them to shrink.
CSS/HTML:
.grid-system {
/* Uncomment the next line to see the container */
/* border:1px solid black; */
}
.grid-system .box-width-2 {
border:1px solid black;
-webkit-flex:2 0 65%;
flex: 2 0 65%;
}
.grid-system .box-width-1 {
border:1px solid black;
-webkit-flex:1 0 32%;
flex: 1 0 32%;
}
.grid-system .box-height-2 {
-webkit-flex-grow:2;
flex-grow:2;
}
.grid-system .box-height-1 {
-webkit-flex-grow:1;
flex-grow:1;
}
.grid-system .flex-row {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-justify-content:flext-start;
justify-content:flex-start;
}
.grid-system .flex-column {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column nowrap;
flex-flow:column nowrap;
width:32%;
}
.grid-system .flex-row > div {
margin:0.5%
}
.grid-system .box-width-1.box-height-1 {
margin-bottom:0.5%;
-webkit-flex-grow:1;
flex-grow:1;
}
.grid-system .box-width-1.box-height-1.end {
margin-bottom:0px;
}
<div class="grid-system">
<div class="flex-row">
<div class="box-width-2 box-height-2">1</div>
<div class="flex-column">
<div class="box-width-1 box-height-1">2</div>
<div class="box-width-1 box-height-1 end">3</div>
</div>
</div>
<div class="flex-row">
<div class="box-width-1">4</div>
<div class="box-width-2">5</div>
</div>
</div>
jsFiddle
A solution only involving floats can reproduce your layout. Compatibility IE8+ (and even below but nobody cares). Pseudo-class :nth-child() (compat. IE9+) is used here to give an arbitrary width and height for demo, you'll have your own layout in real conditions.
* { box-sizing: border-box; }
div { width: 360px; }
section { border: 1px solid #666; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 100px; }
section:nth-child(3) { width: 120px; height: 80px; }
section:nth-child(4) { width: 200px; height: 120px; }
section:nth-child(5) { width: 160px; height: 100px; }
<div>
<section class="left">1</section>
<section class="right">2</section>
<section class="right">3</section>
<section class="left clear">4</section>
<section class="right">5</section>
</div>
I have been created the web page using html and css.
I have been created two products in one column.
I need to add vertical hr line between these two products.
For that i did,
Html:
<div class="headerDivider"></div>
Css:
.headerDivider {
border-right:1px solid #16222c;
height:400px;
margin-right: 458px;
overflow:hidden;
}
It doesn't work correctly, Here is my jsfiddle: http://jsfiddle.net/22z6vjrx/
Can anyone please help me to fix this,
Thanks in advance .....
You have to float all of divs (or inline-block display). But I prefer to add vertical line as border on right for elements:
.product {
float: left;
width: 100px;
height: 200px;
margin-bottom: 5px;
}
.clear {
clear: both;
}
.first {
background-color: #eee;
}
.product:not(:last-child) {
border-right: 1px solid black;
}
.second {
background-color: #ddd;
}
.third {
background-color: #dfd;
}
.fourth {
background-color: #ddf;
}
<div class='row'>
<div class='clear'></div>
<div class="product first"></div>
<div class="product second"></div>
</div>
<div class='row'>
<div class='clear'></div>
<div class="product third"></div>
<div class="product fourth"></div>
</div>
Updated version
Add box-sizing: border-box; to include border and padding to element width (otherwise with will be too big as it will be width + border-width * 2 + padding * 2). Also make sure you have floated products divs as well as vertical hr:
.product,
.vhr {
box-sizing: border-box;
}
.product {
float: left;
width: 49%;
height: 200px;
margin-bottom: 5px;
}
.first {
background-color: #eee;
}
.second {
background-color: #ddd;
}
.vhr {
float: left;
border-left: 1px solid black;
height: 200px;
width: 1%;
margin-left: 1%;
}
<div class="product first"></div>
<div class="vhr"></div>
<div class="product second"></div>