Guy, Sorry I suck that this
How can i make this all my boxes avoid the spacing made by box 1 so that the box 4 auto adjust on the top
My Fiddle link - http://jsfiddle.net/QKbEk/3/
.grp {
width: 140px;
margin: 0px auto;
}
.box {
background: red;
margin: 3px;
float: left;
width: 50px;
height: 50px
}
You could change your rule for .box4 to:
.box4 {
background: red;
float: left;
margin: 3px;
width: 50px;
height: 50px;
position:relative;
top:-25px;
}
jsFiddle example
This happens because of the rules applied to floated elements. Specifically, "The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.". However by using positioning you can place the box wherever you need.
<div class="grp">
<div style="float:left;width:40%">
<div class="box" style="height: 80px">box 1</div>
<div class="box">box 4</div>
</div>
<div style="float:left;width:40%">
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 5</div>
</div>
</div>
Joshua Johnson post for masonry design: http://designshack.net/articles/css/masonry/
Related
I'm trying to create a form with a variable number of form fields that would expand horizontally. Each field would have a minimum width of 300 px, but would expand to fill the row if there is extra space. If there is not enough space for each field at 300px, then it would wrap to another row. Flexbox would be the perfect solution for this. However, I also want there to be a variable width container for submit & cancel buttons that is fixed on the right side of the first row. (See the attached illustration.)
How can I create this fixed, right-aligned container that Flexbox would flow around? Can this be done with Flexbox alone? Would CSS Grid (or a combination of Flexbox & Grid) be helpful here? Example code would be appreciated.
I think your best solution is to use float and inline-block. then you can adjust sizing considering media query
body>.container {
background-color: #FFFFFF;
margin: auto;
margin-top: 24px;
padding: 0px;
}
.container {
border: solid 1px #F00;
font-size:0;
}
.box {
box-sizing: border-box;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
min-height: 36px;
width: calc(25% - 10px);
min-width: 200px;
display:inline-block;
margin: 5px;
font-size:initial;
}
.box.buttons {
float:right;
}
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<div class="container">
<div class="box buttons">
<button>Submit</button>
<button>Cancel</button>
</div>
<div class="box a">Box A</div>
<div class="box b">Box B</div>
<div class="box c">Box C</div>
<div class="box e">Box E</div>
<div class="box f">Box F</div>
</div>
After some experimentation, I found that this is possible with CSS Grid. Here is the basic layout:
HTML:
<div class="auto-fit">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
<div class="I">I</div>
<div class="J">J</div>
<div class="K">K</div>
<div class="L">L</div>
<div class="M">M</div>
<div class="buttons"><button>Submit</button><button>Cancel</button></div>
</div>
CSS:
div.auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
div.auto-fit > div {
background-color: #fff;
border-radius: 3px;
padding: 15px;
font-size: 14px;
}
div.buttons {
grid-column: -1/-2;
grid-row: 1/2;
}
Here is a jsfiddle that shows it in action: https://jsfiddle.net/lobo78/5ufqdm4y/22/
I am trying to create a section on my page that will contain inline-block divs (that would of various lengths). This outer div will be scales with the width of its parent (the parent has col-md-8). I'm trying to see if it's possible to float all the inner individual divs left with a right margin and have them disappear off to the right edge of the parent div. Clearly I'm missing something as these are not lining up the way I want them to.
.outer {
position: relative;
width: 330px;
height: 140px;
overflow-y: hidden;
background-color: red;
}
.box {
display: block;
height: 130px;
float: left;
margin-right: 20px;
background-color: grey;
border: 1px solid #333;
}
.box-1-col {
width: 130px;
}
.box-2-col {
width: 260px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="outer clearfix">
<div id="box-1" class="box box-2-col">
This is box 1
</div>
<div id="box-2" class="box box-1-col">
This is box 2
</div>
<div id="box-3" class="box box-1-col">
This is box 3
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/xc66s1L8/4/
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I've got three left-floating div (1, 2 & 3) and one floating right (4), which is also the last div in my HTML code. The three on the left take up 60% of the width and the last div should fill in on the right. However div 4 only floats past the div 3 and then stops.
<body>
<div style="width: 60%; float: left; background-color: red;">
div 1
</div>
<div style="width: 60%; float: left; background-color: red;">
div 2
</div>
<div style="width: 60%; float: left; background-color: red;">
div 3
</div>
<div style="width: 40%; float: right; background-color: yellow;">
div 4
</div>
</body>
Any suggestions how to make the div go to the top of the page?
This is what you want? DEMO
I edited a bit your HTML code:
<section class="container">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
<div class="block four"></div>
</section>
Just add these CSS rules:
*, *:before, *:after {
box-sizing: border-box;
}
body, div, section {
margin: 0;
padding: 0;
}
html, body {
background: #CCC;
height: 100%;
}
.block {
height: 100px;
display: inline-block;
border: 1px solid black;
}
.block:not(.four) {
float: left;
width: calc(60% / 3);
}
.four {
width: calc(100% - 60%);
}
.container > .four {
float: right;
}
I used the calc() function for set the anchors to the elements. You can see the browser support here
EDIT Sorry, I didn't understand your question. This is what you want! DEMO =)
Cheers,
Leo!
I think what you are trying to achieve here is put some content in your page (the left floated divs) and a sidebar (the right div).
Well, there are many ways to do it, here is a method without using floats (right or left).
HTML:
<body>
<section style="width: 60%;"> <!-- Your main content goes in here -->
<div style="background-color: red;">div 1</div>
<div style="background-color: red;">div 2</div>
<div style="background-color: red;">div 3</div>
</section>
<aside style="width: 40%;" class="right"> <!-- content for right sidebar -->
<div style="background-color: yellow;">div 4</div>
</aside>
</body>
CSS:
aside,section {
display : inline-block;
padding : 0;
margin : 0;
}
aside.right {
vertical-align: top; //to bring sidebar to top
}
Here is a demo FIDDLE
I get an unwanted margin between block1 and block2 with display: inline-block style. See this jsFiddle.
HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#container {
background-color: #f00;
width: 100%;
height: 200px;
}
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
}
The margin disappears when I change the HTML to this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><div id="block2">
block2
</div>
</div>
</div>
or this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><!--
--><div id="block2">
block2
</div>
</div>
</div>
While I prefer the latter, I still do wonder if anyone knows a solution so I can use the original HTML, but no whitespace shows up in innercontainer. Also note that I want to avoid setting float: left; on both block1 and block2 or making them floating by position: absolute|relative because that generates other problems in my layout. Any ideas?
EDIT
Ok, so I had more trouble with my layout. When I added an image to block1, the whole block moved down, very strange (see jsFiddle). I am now using float: left and will have to figure out how I can add a div that consumes the free-space on the right.
Update this part of css :
#block1, #block2 {
display: block;
float: left;
background-color: #00f;
height: 200px;
}
When you are inline, spaces take space!
EDIT :
To be safe change this part of HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
<div style="clear: both"></div>
</div>
If you want to use display: inline-block;. You need to close gap between tags like you mention. Because The it self are treated as inline-elements also. When you have a space or line-break between two tags would create a gap between them.
You can fix this by set font-size of a surrounding container to 0 and set them back in child node.
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
font-size: 0px;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
font-size: 15px;
}
http://jsfiddle.net/SbUwt/27/