I am trying to make multiple divs, specifically five and center them all. I have used the display:inline-block to get them to be side by side but then when I use margin: 0 auto, the display:inline-block seems to get negated and then it's a vertical strip going down the page.
Below is my code:
div {
width: 50px;
height: 300px;
border-radius: 0;
display: inline-block;
}
#red {
background-color: red;
}
#orange {
background-color: orange;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
<div class="container">
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
</div>
I tried looking at the other relevant posts on SO but they don't do it with as many divs or they use static positioning which I don't want to use.
Can someone point me in the right direction?
This happens cause the width of the container is 50px. One quick solution is to set width of container to 100%:
div {
width: 50px;
height: 300px;
border-radius: 0;
display: inline-block;
}
#red {
background-color: red;
}
#orange {
background-color: orange;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
.container {
width: 100%;
}
<div class="container">
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
</div>
You can align to center using text-align center to container:
div {
width: 50px;
height: 300px;
border-radius: 0;
display: inline-block;
}
#red {
background-color: red;
}
#orange {
background-color: orange;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
.container {
width: 100%;
text-align: center;
}
<div class="container">
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
</div>
To achieve both and vertical and horizontal align you can use position: absolute to the container top: 50% left: 50% and margin-top: -150px; /* Half the height */ margin-left: -135px; /* Half the width */:
div {
width: 50px;
height: 300px;
border-radius: 0;
display:inline-block;
}
#red {
background-color: red;
}
#orange {
background-color: orange;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
.container {
width: 270px;
position: absolute;
top: 50%;
left:50%;
margin-top: -150px; /* Half the height */
margin-left: -135px; /* Half the width */
}
<div class="container">
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
</div>
You can set text-align: center on .container. Updated you code:
.container {
width: 100%;
text-align: center;
}
.container > div{
width: 50px;
height: 300px;
border-radius: 0;
display:inline-block;
}
http://jsfiddle.net/jermund/wzdLrs0m/
Related
Given the following snippet: http://jsfiddle.net/8wy1mku2/
.black {
width: 200px;
height: 100px;
background: black;
}
.grey {
width: 180px;
height: 100%;
background: grey;
}
.red {
width: 160px;
height: 20px;
background: red;
}
.blue {
width: 140px;
height: 100%;
background: blue;
}
<div class="black">
<div class="grey">
<div class="red">red</div>
<div class="blue">blue</div>
</div>
</div>
How can I make the blue child with height 100% respect the space of the red child?
I want the blue box to automatically resize to be of size 100% minus the size of the red box.
Please help!
You should use flex on the grey box, then you can use flex grow on the blue box:
.black {
width: 200px;
height: 100px;
background: black;
}
.grey {
width: 180px;
height: 100%;
background: grey;
display: flex;
flex-direction: column;
}
.red {
width: 160px;
height: 20px;
background: red;
}
.blue {
width: 140px;
background: blue;
flex-grow: 1;
}
<div class="black">
<div class="grey">
<div class="red">red</div>
<div class="blue">blue</div>
</div>
</div>
You can use the calc function. Like this:
Syntax
height: calc(100% - heightOfTheRedBox);
.black {
width: 200px;
height: 100px;
background: black;
}
.grey {
width: 180px;
height: 100%;
background: grey;
}
.red {
width: 160px;
height: 20px;
background: red;
}
.blue {
width: 140px;
height: calc(100% - 20px);
background: blue;
}
<div class="black">
<div class="grey">
<div class="red">red</div>
<div class="blue">blue</div>
</div>
</div>
I have a section inside width: 1180px; i want to extend this green color div I want to make width: 100% I have tried using vw but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You need to reset the margin using media query. Initially you have a negative margin but after 1180px it will be a positive one creating the unwanted space. You also don't need to set width using vw unit. Keeping the default width is enough:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
}
#media all and (max-width:1180px) {
.box2 {
margin:0;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
#media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Try this:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
I am trying to create the following structure using embedded divs inside a header:
The height and width of the red part is known and fix
The height of the green rectangle is known and fix
The overall width of the frame can vary, but is never smaller than the red part
I have tried with the following html code:
<header id="header">
<div id="yellowAndGreen">
<div id="yellow"></div>
<div id="green"></div>
</div>
<div id="red"></div>
</header>
and the following CSS:
#header {
width: 400px;
}
#yellowAndGreen {
}
#yellow {
background-color: yelow;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
}
but it does not work. I have created a JsFiddle. Can anyone modify it to create what I am looking for?
Use float:right; to make the red box float to the right. You'll need to adjust the html:
<header id="header">
<div id="alldivs">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</header>
and the css:
#header {
width: 400px;
}
#yellow {
background-color: yellow;
height:110px;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
float:right;
}
Please note you had misspelled "yellow", and that you need to set a height for the yellow <div>.
Finally here is the adjusted fiddle
Hope this helps
This uses flexbox, which has some support drop off on older browsers. I've excluded vendor-specific attirbutes for simplicity.
#header {
width: 400px;
display: flex;
}
#yellowAndGreen {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#yellow {
background-color: yellow;
flex-grow: 1;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
}
No floats or flexbox necessary!
Rearranged your HTML a bit. Set #header background-color to red and min-width so it will never be too small. Use calc() for #yellow's width so that the background red of it's parent will always be 150px wide.
#header {
width: 400px;
background-color: red;
width: 100%;
min-width: 150px;
}
#yellow {
height: 150px;
width: calc(100% - 150px);
background-color: yellow;
}
#green {
background-color: green;
height: 40px;
}
<header id="header">
<div id="yellow"></div>
<div id="green"></div>
</header>
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
How to position three blocks in the table-cell follows: p1 top, p2 bottom, p3 in the middle?
The html as next:
<div id="table">
<div id="row">
<div id="r2"></div>
<div id="r3"></div>
<div id="r1">
<div id="p1">top</div>
<div id="p3">middle</div>
<div id="p2">bottom</div>
</div>
</div>
</div>
CSS
#table{
display: table;
width:500px;
height:500px;
max-height:500px;
min-height: 500px;
}
#row{
display:table-row;
}
#r1, #r2, #r3{
display:table-cell;
}
Details - http://jsfiddle.net/2ZF6J/
IE7 does not support display: table so you can just simply use floats and absolute positioning.
HTML:
<div id="wrapper">
<div id="r2"></div>
<div id="r3"></div>
<div id="r1">
<div id="p1">top</div>
<div id="p3">middle</div>
<div id="p2">bottom</div>
</div>
</div>
CSS:
#wrapper {
width:500px;
height: 1px;
min-height: 300px;
}
#r1 {
position: relative;
width: 177px;
border:1px solid black;
}
#r3 {
width: 156px;
background-color: #aef;
}
#r2 {
width: 161px;
border:1px solid black;
background-color: #eee;
}
#r1, #r2, #r3 {
float: left;
height: 100%;
}
#p1, #p2, #p3 {
position: absolute;
width: 100%;
}
#p1 {
top: 0;
background-color: gold;
}
#p2 {
bottom: 0;
background-color: crimson;
}
#p3 {
top: 50%;
margin-top: -0.5em;
background-color: orange;
}
See it here: http://jsbin.com/ekImIYih/3