This question already has answers here:
How do you float elements without a vertical gap?
(9 answers)
Closed 5 years ago.
Is there a technique (codified or hacky) to get floated blocks to fill-in upwards as well as their float direction.
So that something like -
Becomes
I realize this is accomplished by javascript libraries like Masonry.
Just wondering if there are any CSS approaches to accomplish this or something similar.
Related codepen
https://codepen.io/2nj2nu7p9oVLGXKS4tIpu8eILcmoXg/pen/QOdmqw
body * {
box-sizing: border-box;
}
.wrapper {
max-width: 500px;
background: limegreen;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.block {
height: 100px;
background: lightblue;
width: 250px;
float: left;
border: solid 2px;
&:nth-child(even) {
background: blue;
height: 150px;
}
}
I simply just made any lightblue (odd) elements float: left and any blue (even) elements float: right
How does this look:
body * {
box-sizing: border-box;
float: left;
}
.wrapper {
max-width: 500px;
background: limegreen;
}
.block {
height: 100px;
background: lightblue;
width: 250px;
border: solid 2px;
vertical-align: top;
}
.block:nth-child(even) {
float: right;
background: blue;
height: 150px;
}
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 4 years ago.
I am trying to center a div element. It seems in my code that all is right but the element is not being centered properly Where did I wrong? If i try to center it by using flexbox then it is centered properly. Where is the wrong of positioning property?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 200px;
height: 39px;
border: 1px solid red;
position: relative;
}
.cntr {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: blue;
width: 35px;
height: 35px;
}
<div class='container'>
<div class='cntr'>
</div>
</div>
You can use a flexbox instead of absolute positioning which will keep the document flow intact.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 200px;
height: 39px;
border: 1px solid red;
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
}
.cntr {
background-color: blue;
width: 35px;
height: 35px;
}
<div class='container'>
<div class='cntr'>
</div>
</div>
Use flexbox
Here's the code
html:
<div class="parent">
<div class="child">
</div>
</div>
css:
.parent{
background: #000;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.child{
background: #ff0;
width:100px;
height:100px;
}
Demo:
https://jsbin.com/duxakey/edit?html,css,output
I've got a simple question which hopefully has a simple answer. It seems basic but I just can't get my head around it.
So, I've got four boxes arranged in a container:
div {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper {
box-sizing: content-box;
height: 600px;
width: 600px;
margin: 100px auto;
border: 2px solid gray;
}
.box-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 300px;
height: 300px;
padding: 0px;
}
.c {
background-color: cyan;
}
.y {
background-color: yellow;
}
.m {
background-color: magenta;
}
.k {
background-color: black;
}
<div class="wrapper">
<div class="box-container">
<div class="box c"></div>
<div class="box y"></div>
<div class="box m"></div>
<div class="box k"></div>
</div>
</div>
I've applied box-sizing: border-box; to the divs, but for some reason padding is having no effect at all. If I use margin then it makes the divs too big for the wrapper, and they move position.
What am I missing here?
Thanks in advance
Jamie
Your HTML & CSS is correct. If you need padding on all the .c .m .y .k boxes, then use
.box {
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #000; //border also works
}
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 4 years ago.
I have two divs side by side.
Div1 width is 200px
and Div2 should fill the screen.
To do this, I use jQuery and detect the screen with and then substuct 200 from it.
But if I use this way, jQuery slows down the browser.
So I'm searching a better way rather than using jQuery.
What is the best way to do this?
Update :
I forgot to write that float did not fixed my solution.
Thank you I'm going to check the answers.
float solution
body { margin: 0; }
#a {
background-color: lime;
width: 200px;
float: left;
height: 100vh
}
#b {
background-color: blue;
margin-left: 200px;
height: 100vh;
}
<div id="a"></div>
<div id="b"></div>
css grid
body {
margin: 0;
}
.gridcontainer {
display: grid;
grid-template-columns: 200px 1fr;
height: 100vh;
}
#a {
background-color: lime;
height: 100vh;
}
#b {
background-color: blue;
height: 100vh;
}
<div class="gridcontainer">
<div id="a"></div>
<div id="b"></div>
</div>
flexbox
body {
margin: 0;
}
.flexcontainer {
display: flex;
}
#a {
background-color: lime;
width: 200px;
height: 100vh;
}
#b {
background-color: blue;
height: 100vh;
width: calc(100% - 200px);
}
<div class="flexcontainer">
<div id="a"></div>
<div id="b"></div>
</div>
inline-block solution
body {
margin: 0;
}
.inlineblockcontainer {
font-size: 0;
}
.inlineblockcontainer>div {
display: inline-block;
}
#a {
background-color: lime;
font-size: 16px;
width: 200px;
height: 100vh;
}
#b {
background-color: blue;
font-size: 16px;
height: 100vh;
width: calc(100% - 200px);
}
<div class="inlineblockcontainer">
<div id="a"></div>
<div id="b"></div>
</div>
html,
body,
#container {
height: 100%;
}
#left {
width: 200px;
float: left;
min-height: 100%;
background-color: blue;
}
#right {
width: 100%;
min-height: 100%;
background-color: red;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
https://jsfiddle.net/832ahuqc/6/
I am having trouble with some floated boxes in CSS.
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
Here is the pen:
http://codepen.io/anon/pen/myKzMd
I want the left green box to start on the same height as the red one. HTML structure should stay as is.
Thanks,
Sascha
This code below will get the result you want.
HTML
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
CSS
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
EDIT: Updated the answer with full code, to avoid confusing, since OP has updated the demo in the question. So no float on .tre would be the best solution to me.
.tre {
float: left;
}
Dont forget to put overflow:hidden in parent div ie .container because once you float the child elements you have to put overflow:hidden in its
try this out :
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-left:40%;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
.container {
height:400px;
border: 5px solid green;
}
.one {
width: 40%;
height: 100%;
float: left;
background: blue;
}
.two, .three {
width: 60%;
height: 50%;
float:right;
}
.two {
background: yellow;
}
.three {
background: red;
}
You can change your structure like below...
<div class="container">
<div class="one">One</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
<div class="two">Two</div>
</div>
My navbar (940px for instance) contains 3 divs :
One aligned left (automatic sizing) containing a menu
One aligned right (defined size, 100px for instance) containing a logo
One (automatic sizing) containing an input[type="text"] that should stick to left and right divs
Each div will have a different background/opacity, there must not have overlapping between them.
He is a drawing about what I need :
+------------------+-------------------------------------------+-----------------+
| MENU | INPUT TYPE TEXT (width: 100%) | LOGO |
+------------------+-------------------------------------------+-----------------+
Do you have an idea on how to do that? Thanks in advance.
Don't float the center <div>. If you move it below the floating elements, it will sit between the floated elements. Adding overflow: hidden to the middle element prevents it from flowing beneath the floated elements.
HTML from your example:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
and the CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 500px;
background: blue;
overflow: hidden;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
check this fiddle I made 3 div's and 1 container. hope it helps.
body
{
margin: 0px;
padding: 0px;
}
.container
{
width: 100%;
height: 200px;
}
.left
{
width: 50px;
height: 200px;
background: green;
float: left;
}
.center
{
width: 68%;
height: 200px;
background: blue;
float: left;
}
.right
{
width: 50px;
height: 200px;
background: yellow;
float: left;
}
Rearrange your HTML so the elements are in this order:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
Then use this CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 100px;
background: blue;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
jsFiddle example
Move the item you want on the right to the first position in the HTML:
<div class="wrap">
<div class="r">Logo</div>
<div class="l">Menu</div>
<div class="c">Center content</div>
</div>
Then it's simply CSS:
.wrap { background: #ddd; margin: 10px; }
.wrap > div { padding: 10px;}
.r { float: right; background: #aaa; width: 100px; }
.l { float: left; background: #eee; width: 100px; }
.c { text-align: center; }
DEMO HERE