I looked around but couldn't find something that works. I'd like to somehow center div elements that have class="box". Here is an example of how I would like it to be:
Can someone tell me how I would go about doing this? I have tried something that obviously wouldn't work but here is what I have so far:
body {
background-color: rgb(32, 32, 36);
height: 100%;
}
#main {
background-color: rgb(50, 50, 56);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
box-shadow: 10px 10px 20px rgb(0, 0, 0);
border-style: solid;
border-width: 3px;
border-color: rgb(20, 20, 26);
overflow: auto;
height: 95vh;
color: rgb(0, 0, 0);
}
.box {
margin: auto 0;
left: 25;
right: 25;
top: 25;
bottom: 25;
height: 160px;
width: 140px;
border-style: solid;
border-width: 3px;
border-color: rgb(20, 20, 26);
box-shadow: 10px 10px 20px rgb(0, 0, 0);
background-color: rgb(70, 70, 76);
}
<body>
<div id="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
P.S. Don't just post code, please. I want to learn so please explain how it all works
Use CSS Flexbox. Make your #main parent div display: flex & justify-content: space-between. And then accordingly give your width to box. Like:
#main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
width: 30%;
}
.box:nth-child(4),
.box:nth-child(5) {
width: 45%;
}
Have a look at the snippet below (use full view for better understanding):
body {
background-color: rgb(32, 32, 36);
height: 100%;
}
#main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: rgb(50, 50, 56);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
box-shadow: 10px 10px 20px rgb(0, 0, 0);
border-style: solid;
border-width: 3px;
border-color: rgb(20, 20, 26);
overflow: auto;
height: 95vh;
color: rgb(0, 0, 0);
}
.box {
margin: 10px 0;
left: 25;
right: 25;
top: 25;
bottom: 25;
height: 160px;
width: 30%;
border-style: solid;
border-width: 3px;
border-color: rgb(20, 20, 26);
box-shadow: 10px 10px 20px rgb(0, 0, 0);
background-color: rgb(70, 70, 76);
}
.box:nth-child(4),
.box:nth-child(5) {
width: 45%;
}
<body>
<div id="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
Hope this helps!
With flexbox, you can justify-content: space-around; and flex-wrap: wrap; this means evenly space elements along a line and if the line has too much on it start a new line.
Here is some more resources and example about flexbox
I've made a simple example below.
body {
margin: 0;
}
#wall {
background: #bed6e2;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.brick {
width: calc(100%/9);
height: 65px;
background: #ab837b;
border: 1px solid #222;
border-radius: 3px;
margin: 2px 0;
}
.brick.wide {
width: calc((100% / 9) * 3);
}
<div id="wall">
<div class="brick wide"></div>
<div class="brick wide"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick wide"></div>
<div class="brick wide"></div>
<div class="brick wide"></div>
<div class="brick"></div>
<div class="brick wide"></div>
<div class="brick"></div>
</div>
Hope this is helpful.
Flexbox is great but it has its downsides, I prefer to stick to using float.
There a 2 new classes, box1 and box2 which have styles specific to the size of the box (you might want to look at using a grid system)
There is also a .clearfix class which is clears your floats.
I took the liberty of tidying various bits of your css that were not needed. If you want to know more let me know.
* {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
body {
background-color: rgb(32, 32, 36);
}
#main {
background-color: rgb(50, 50, 56);
width: 75%;
margin: 0 auto;
box-shadow: 10px 10px 20px rgb(0, 0, 0);
border:3px solid rgb(20, 20, 26);
color: rgb(0, 0, 0);
}
.box {
margin: 25px 0;
height: 75px;
border: 3px solid rgb(20, 20, 26);
box-shadow: 10px 10px 20px rgb(0, 0, 0);
background-color: rgb(70, 70, 76);
float: left;
}
.box1 {
width: 20%;
margin-left: 10%;
}
.box1:nth-child(3) {
margin-right: 10%;
}
.box2 {
width: 35%;
margin-left: 10%;
}
.box2:nth-child(2) {
margin-right: 10%;
}
<body>
<div id="main" class="clearfix">
<div class="box box1"></div>
<div class="box box1"></div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box2"></div>
<div class="box box1"></div>
<div class="box box1"></div>
<div class="box box1"></div>
</div>
</body>
div elements have the property display: block by default. Block-level elements automatically begin on a new line, but adding the attribute display: inline-block on .box will let the elements exist on the same line. Applying text-align: center to the container holding your .boxes (which is #main) will center the inline-blocks inside.
Alternatively, you could apply display: flex to #main which will automatically manage the position of all elements inside (by default, in a row). You can customize this extensively without needing additional styles on .box. Read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Updated answer
Try to use display: flex to parent container and if you want wrap content to second line then use flex-wrap: wrap.
body {
background-color: rgb(32, 32, 36);
height: 100%;
}
#main {
background-color: rgb(50, 50, 56);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
box-shadow: 10px 10px 20px rgb(0, 0, 0);
border-style: solid;
border-width: 3px;
border-color: rgb(20, 20, 26);
overflow: auto;
height: 95vh;
color: rgb(0, 0, 0);
}
.container {
display: flex;
justify-content: space-between;
}
.container_second .box {
width: 180px;
}
.box {
margin: auto 0;
left: 25;
right: 25;
top: 25;
bottom: 25;
height: 160px;
width: 140px;
border-style: solid;
border-width: 3px;
border-color: rgb(20, 20, 26);
box-shadow: 10px 10px 20px rgb(0, 0, 0);
background-color: rgb(70, 70, 76);
}
<body>
<div id="main">
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container container_second">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
For complete reference on flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Instead of using 0 margin in the left_right (the margin style of .box) try using 40%
use:
.box {
margin: auto 40%;
instead of:
.box {
margin: auto 0;
The percentage will keep 40% of the total width of the margin on each side. It is important to note though that if you change the width of the box class you will need to adjust the margins also.
Related
I would like to program a web that has 3 columns in a PC and a single column in a smartphone. The problem is that the class "item" inside my media query doesn't seem to work. Somehow the main "item" is always working even though I use a PC, showing two columns instead of three.
This is the HTML code:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
margin-left: 32px;
margin-right: 32px;
margin-bottom: 32px;
width: 311px;
height: 200px;
left: 565px;
top: 624px;
background: #C15D5D;
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.item.green {
background-color: #71B083;
}
.item.yellow {
background-color: #D2BB68;
}
#media (min-width: 1281px) {
.item {
border-style: solid;
flex: 0 32%;
height: 100px;
margin-bottom: 2%;
/* (100-32*3)/2 */
width: 311px;
height: 200px;
left: 565px;
top: 624px;
background: #C15D5D;
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.item.green {
background-color: #71B083;
left: 212px;
}
.item.yellow {
background-color: #D2BB68;
left: 918px;
}
}
<body>
<div class="container">
<div class="item green">1</div>
<div class="item">2</div>
<div class="item yellow">3</div>
<div class="item green">4</div>
<div class="item">5</div>
<div class="item yellow">6</div>
<div class="item green">7</div>
<div class="item">8</div>
<div class="item yellow">9</div>
</div>
</body>
The width of the elements is 32%. The margin on each side is 32px;
To have three elements side-by-side you need to fit 192px of margin into the 4% of space that is left over.
For that to happen, the content width of the container needs to be 4608px, so the window would need to be much wider than 1281px.
Hello I'm pretty new to this & I'm trying to figure out how to scale and clip these images to fit into each grid square without having a border...
I also don't know if this is an effective way to set up my images. I'd like to have a different image for each square, but how it's set up now I'd have to make a new .box .inner# for each one. If there is a better way to structure this that'd be really helpful.
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
You might do it like this:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
I am not fully sure if this will fix your problem but maybe take off the margin in your .box class in your css file.
not enough reputation yet so click this link
Instead of having your margin at 5px change it to 0px and see if that helps.
As for the different images you just need to create a new class for each image an link a new image to that class, go back and link it up like you have with the two previous.
I understand that if I float an element, following elements will eventually disappear behind that element if they do not have a float set themselves or at least clear the float. Just like it is happening with »box three« in this example. But why is the content of box three jumping out of the div? Isn't the Number 3 or any potential content of the box supposed to be inside »box three«?
http://jsfiddle.net/7vw4Leg5/
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box {
text-align: center;
font-size: 30px;
color: red;
margin: 5px;
width: 200px;
height: 100px;
background: grey;
}
.two {
border: 2px solid red;
float: left;
opacity: 0.66;
}
.three {
opacity: 0.33
}
*Edit:
Here another example to explain the issue I don't understand.
Why isn't the number two just inside the blue box? #Terry: Okay, if I reduce the first box' width, the content jumps up a line and enters the div. But why isn't it there in the first place? Isn't there enough space available as the box is completely empty?
http://jsfiddle.net/utsc84pq/
<div class="box one">1</div>
<div class="box two">2</div>
.box {
font-size: 40px;
margin: 5px;
width: 300px;
height: 150px;
}
.one{
float: left;
border: 5px solid rgba(255, 154, 188, 0.9);
background-color: rgba(255, 165, 0, 0.25);
}
.two {
position: relative;
top: 170px;
border: 5px solid rgba(35, 154, 255, 0.5);
background-color: rgba(100, 165, 255, 0.25);
}
Try this.
.box {
text-align: center;
font-size: 30px;
display:block;
color: red;
margin: 5px;
width: 200px;
height: 100px;
line-height:100px;
background: grey;
}
.one{
border:1px solid green;
display:block;
}
.two {
border: 1px solid red;
opacity: 0.66;
}
.three {
border: 1px solid yellow;
opacity: 0.66;
}
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
Yes, the content should be inside box 3, but since you have set all the boxes with the same widths, this means that the content in box 3 cannot be pushed to the side but only to the bottom—you can see how float interacts with the content of box 3 if you reduce it's width:
.box {
text-align: center;
font-size: 30px;
color: red;
margin: 5px;
width: 200px;
height: 100px;
background: grey;
}
.two {
border: 2px solid red;
float: left;
opacity: 0.66;
width: 25px;
}
.three {
opacity: 0.3;
}
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3 random content here</div>
I'm facing a problem:
I want to put 3 divs horizontally with itself, but i'm not getting to do it right.
Could someone help?
I've already searched a lot about properties in css and html, but i couldn't apply to what i'm doing.
With the normal zoom:
http://i.imgur.com/ylk5pm2.png
What i want:
http://i.imgur.com/47kzlpv.png
Codes:
.container {
width:100%;
border-color: #FF0000;
border-style: solid;
border-width:medium;
text-align:center;
margin-bottom: 1%;
}
.menu_box_filtro{
display:inline;
}
.conteudo_box_filtro{
display:inline-block;
}
<div class="border_preta">
<div class="menu_box_filtro">
<div class="grid_10 border_brown conteudo_box_filtro">
</div>
</div>
<div class="menu_box_filtro">
<div class="grid_63 border_brown conteudo_box_filtro">
menu centro
</div>
</div>
<div class="menu_box_filtro">
<div class="grid_10 border_brown conteudo_box_filtro">
menu direita
</div>
</div>
</div>
You can check with the below link.
Fiddle
<div class="main">
<div class="inner">
<div class="left-col">Left</div>
<div class="center-col">Center</div>
<div class="right-col">Right</div>
</div>
Check this
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
background-color:#F0A202;
}
.group{
content:"";
display:table;
clear:both;
}
div:nth-of-type(1) {
width: 36%;
float: left;
}
div:nth-of-type(2) {
width: 30%;
float: left;
margin-left: 4%;
}
div:nth-of-type(3) {
width: 26%;
float: right;
}
<div class="container group">
<div>
<p>First<p>
</div>
<div>
<p>Second<p>
</div>
<div>
<p>Third<p>
</div>
</div>
Here is an example using FlexBox.
.container {
width: 100%;
border-color: #FF0000;
border-style: solid;
border-width: medium;
display: flex;
align-items: center;
}
.container>* {
flex-grow: 1;
}
.menu_box.left {
background-color: rgba(255, 0, 0, 0.5);
height: 100px;
}
.menu_box.center {
background-color: rgba(0, 255, 0, 0.5);
height: 200px;
}
.menu_box.right {
background-color: rgba(0, 0, 255, 0.5);
height: 100px;
}
<div class="container">
<div class="menu_box left">Left</div>
<div class="menu_box center">Center</div>
<div class="menu_box right">Right</div>
</div>
For the following HTML, I would like the container to wrap the section+content+element(s), and I would like element2 to be a direct (float:left?) continuation of element1..
<div class="page">
<div class="container">
<div class="section">
<div class="content">
<div class="element1">Elements Goes Here And Here And Here And Here .. more elements hereafter</div>
</div>
</div>
<div class="section">
<div class="content">
<div class="element1">Elements Goes Here And Here And Here And Here</div>
<div class="element2">more elements hereafter</div>
</div>
</div>
</div>
</div>
This CSS isn't working though http://jsfiddle.net/sLnY5/3/:
.container {
width: 100%;
min-height: 74px;
height: auto;
border: 1px solid rgba(142, 142, 142, 1);
}
.section {
width: 100%;
min-height: 37px;
height: auto;
border: 1px solid rgba(142, 142, 142, 1);
background-color: blue;
}
.content {
float: left;
min-height: 37px;
height: auto;
width: 100%;
line-height: 1.42;
padding: 2%;
border: 1px solid rgba(142, 142, 142, 1);
}
.element1 {
float: left;
font-size: 12.9px;
padding-top: 2px;
letter-spacing: 0.07em;
background-color: green;
}
.element2 {
float: left;
padding-left: 3px;
background-color: purple;
}
.page {
width: 50%;
height: auto;
margin: 0 auto;
padding-top: 5%;
}
I can't think of a scenario where you would want to use float: left; with width: 100%;. In my experience, float is overused and largely misunderstood. I'm not sure what you mean by "a direct continuation of element1", but it sounds like you might want display: inline;.
jsfiddle.net/sLnY5/4