A simple html/css issue. Please look at this example, I would like the blocks in the 2nd line to fill up the gaps above them. Anyway besides using JavaScript?
.block {
float: left;
width: 200px;
height: 200px;
background-color: #ff0000;
margin: 2px 2px 0 0;
}
<div style="width: 606px;">
<div class="block">
</div>
<div class="block">
</div>
<div class="block" style="height: 250px">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Simple answer, NO.
(sorry)
This cannot be accomplished in vanilla HTML or CSS alone, you will need to look into a JavaScript implementation like Isotope or Masonry, or one of your own making.
If you are open to using CSS3, then maybe columns can help you to get the blocks stack up.
Demo: http://jsfiddle.net/abhitalks/bLUrU/5/
Example CSS:
.container {
-webkit-columns: 3; /* create three columns */
-webkit-column-gap: 2px; /* have 2px gap between the columns */
}
.block {
width: 200px;
height: 200px;
background-color: #ff0000;
margin: 2px 2px;
-webkit-column-break-inside: avoid; /* avoid breaking contents across columns */
}
Add other vendor prefixes as required apart from -webkit.
Of course, by using columns you would have to relook the ordering of your divs. Like here: http://jsfiddle.net/abhitalks/bLUrU/6/
add float:right to the third block
<div style="width: 606px;">
<div class="block">
</div>
<div class="block">
</div>
<div class="block" style="height: 250px;float:right;">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Related
I am scaling several divs and have one that is larger than the others in width and height, the other divs that are after this one are too low, not aligned on the same line.
Note: execute the code below on full page, Follows the code:
body {
background-color: #2E5173;
}
div {
border-radius: 10px;
background-color: white;
margin: 10px;
width: 240px;
height: 250px;
display: inline-block;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.big {
width: 508px;
height: 508px;
}
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class="big"> </div>
<div class="">this div is very low</div>
<div class="">this div is very low</div>
The code above looks like this:
I need it to look like this:
Can anyone help?
You can easily do this using CSS grid:
.container {
display:grid;
grid-template-columns:repeat(auto-fit,240px); /* The width */
grid-auto-rows:250px; /* The height */
grid-auto-flow:dense; /*This is the important property*/
/* The margin */
grid-gap:20px;
padding:10px;
}
.container div {
border-radius: 10px;
background-color: #2E5173;
}
.big {
grid-column:span 2; /* Take twice the width*/
grid-row:span 2; /* Take twice the height*/
}
<div class="container">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div class="big"> </div>
<div>this div is very low</div>
<div>this div is very low</div>
</div>
CSS Grid can provide you with great control of your layouts and is not super complicated. A few of the resources I've used in the last are listed below:
www.w3schools.com/css/css_grid.asp
learncssgrid.com
css-tricks.com/snippets/css/complete-guide-grid
CSS Grid also works well with media queries if you need the page to be responsive.
I have a page with a sidepanel taking up 25% with float:left side of the page, and a div with float:right taking up the other 75%. In the right div, there are 4 ChartJS graphs in a 2 by 2 format. For reasons I can't seem to figure out, I can't get the Charts to either align in the center of the div, or get them to stretch out to use the entire div, and not just the left 70ish %. I've tried different floats, text-align, widths, padding and can't seem to get it right.
<div class="dashboards">
<div id="chartsId" class="row">
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
</div>
</div>
.dashboards {
margin: 0;
border: 1px solid red;
display: table;
width: 100%;
table-layout: fixed;
text-align: center;
}
OK, so if you're using Bootstrap then I think your issue is in the column count.
Bootstrap uses a 12-column layout, and you're using 10 per row (and I say "per row" because you've got 5*4 = 20 columns which have resolved to two 10x10 rows).
Instead try two rows, which will work unless you want a one-row layout on desktop or some such. This will look like:
<div class="row">
<div class="col-sm-5"><chart /></div>
<div class="col-sm-5"><chart /></div>
</div>
<div class="row">
<div class="col-sm-5"><chart /></div>
<div class="col-sm-5"><chart /></div>
</div>
Which is OK, but you'll still have the offset problem. And what you'll need to fix that is... offset! The issue you're facing is again, 10 columns used in a 12-column layout. Something like this, where x is one chart and y is another:
|x|x|x|x|x|y|y|y|y| | |
By introducing a 1-column offset, you'll center your columns like so:
| |x|x|x|x|x|y|y|y|y| |
And all you need to do is add .offset-sm-1 to your columns, like so:
<div class="row">
<div class="col-sm-5 .offset-sm-1"><chart /></div>
<div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>
<div class="row">
<div class="col-sm-5 .offset-sm-1"><chart /></div>
<div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>
And you should have nice centered charts.
Does the design below suit your question? A simple way here is to use floating elements with defined heights and widths.
Below a working snippet and a screenshot mimicking your design (left and panels) as a visual proof.
#root {
display: flex;
justify-content: flex-start;
}
#leftpanel,
#rightpanel {
min-height: 100%;
box-sizing: border-box;
/* to include the borders in the dimensions */
}
#leftpanel {
width: 25%;
background: black;
color: white;
}
#rightpanel {
width: 75%;
background: #f0f0ff;
}
.dashboards {
width: 100%;
margin: 0;
border: 1px solid red;
box-sizing: border-box;
/* to include the borders in the dimensions */
}
.row {
margin: auto;
/* Defining width and height to let the "col-sm-5" class to be defined */
/* relatively to them. */
width: 400px;
height: 400px;
box-sizing: border-box;
/* to include the borders in the dimensions */
border: 5px solid darkgreen;
background: #f0f0f0;
}
.col-sm-5 {
/* use floating positioning */
float: left;
width: 50%;
height: 50%;
box-sizing: border-box;
/* to include the borders in the dimensions */
border: 2px solid darkblue;
}
<div id="root">
<div id="leftpanel">
Left panel
</div>
<div id="rightpanel">
Right panel
<div class="dashboards">
<div id="chartsId" class="row">
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
<div class="col-sm-5">
<canvas width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the border property and it still didn't look right. However when I use outline or box-shadow, I get this alignment issue at the end.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.
What is the proper way to achieve this where the last element lines up the border(or outline) correctly?
Because you're using outline to create your border, the outlines at the center are actually overlapping one another. When you get to the bottom where there is only one div the outline is not being overlapped and therefore looks misaligned. You could solve this issues by building it as a table:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class="table">
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
</div>
</div>
I have some HTML code that looks like this:
<div class="container">
<div class="element"> </div>
<div class="element"> </div>
<div class="element"> </div>
<div class="element"> </div>
</div>
And I want to display it in a two-column layout, where each element is displayed directly underneath the one above. I've made a JSFiddle to show my current progress, but I can't figure out how to remove the white gaps between the elements. Is it at all possible, or do i need to change the HTML (I'd rather not)?
An easy way would be to wrap each column items into separate divs. Your .box and .one, .two, .three css declarations are interfering.
[http://jsfiddle.net/grLyvomy/][1]
You could use a seperate div for each column (in your case two).
.container{
border: 1px black solid;
width: 320px;
}
.clear{
clear: both;
}
.leftColumn{
width: 50%;
float: left;
}
.rightColumn{
width: 50%;
float: right;
}
.box:nth-child(2n+1){
background: green;
border-bottom: 1px solid red;
}
.box:nth-child(2n){
background: red;
border-bottom: 1px solid green;
}
.one{ height: 50px; }
.two { height: 80px; }
<div class="container">
<div class="leftColumn">
<div class="box one">first</div>
<div class="box two">second</div>
<div class="box three">third</div>
</div>
<div class="rightColumn">
<div class="box else">first</div>
<div class="box two">second</div>
<div class="box three">third</div>
<div class="box four">fourth</div>
<div class="box one">last</div>
</div>
<div class="clear"></div>
</div>
http://jsfiddle.net/nvmcxjpL/8/
Try to change one and three divs height sum same as two by changing three div height 20px to 30px
.three {
float: left;
width: 50%;
height: 30px;
}
I am trying to create a fluid layout.
Everything is working FF, Chrome, Safari and IE8
This just doesn't work in IE7. I am sure it's a problem with the floated containers.
Tried to do a couple clear fixes, but that didn't seem to work. Just not sure what I am missing, any thoughts or suggestions are appreciated.
If you compare how it renders in IE7 to IE8 a few things I noticed:
The background-color for the first row is the background color of the
container
The bottom border and margin of the container are missing
Here is a live example on jsFiddle
Here's the HTML
<div class="container layout">
<div class="containerContent row">
<div class="group">
<div class="column">
<div class="component">
Player 1:
</div>
</div>
<div class="column">
<div class="component">
<input class="text" type="text"/>
</div>
</div>
</div>
<div class="groupByTwo group">
<div class="column">
<div class="component">
Player 2:
</div>
</div>
<div class="column">
<div class="component">
<input class="text" type="text"/>
</div>
</div>
</div>
<div class="clearFix"></div>
</div>
</div>
Here is the CSS
.container{
margin: 5px;
border: 1px solid #fff;
background-color: #aaa;
}
.containerContent{
margin: 1px;
background-color: #f5f5f5;
}
.group{
float: left;
width: 50%;
overflow: hidden;
}
.column{
float: left;
width: 50%;
overflow: hidden;
}
.component{
padding: 5px;
}
.clearFix{
clear: both;
}
It's definitely a hasLayout issue, like skybondsor said.
The best way I've seen for clearing floats is as such:
.floatParent {
zoom: 1; <-- this is for IE7
}
.floatParent:after { <-- this is for all the good browsers
content: "\0020";
clear: both;
display: block;
}
Then you can remove that anti-semantic clearfix div from the markup, and just have something clean like this:
<div class="floatParent">
<div class="floating">I FLOAT!</div>
<div class="floating">WHOA ME TOO!</div>
</div>
Then it's just a matter of fixing up those pesky form fields, which for some reason always cause layout issues (by dropping on to the next line).