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>
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 am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
I need to create one page with 4 elements: header, filter of elements, item list and item. But i can't to set div's without main page scroll. I want to have only one scroll bar - in item-list?
html,
body {
margin: 0;
height: 100%;
}
.header {
background-color: cadetblue;
height: 3em;
width: 100%;
}
.space {
width: 25em;
height: 100%;
}
.filter {
width: 100%;
height: 5em;
background-color: darkblue
}
.item-list {
height: 100%;
margin: 0.2em;
overflow: auto;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<body>
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
Can anybody to help me with this?
You can use flex and overflow:
html,
body {
margin: 0;
height: 100%;
}
/* === flex update ====*/
body, .space {/* display:flex and overflow:hidden */
display:flex;
flex-direction:column;
overflow:hidden;
}
.space, .item-list {/* fill whole space avalaible */
flex:1;
}
.item-list {
overflow: auto;/* overflow ...*/
background:gray /* debug, see me */
}
/* === end flex update ====*/
.header {
background-color: cadetblue;
height: 3em;
}
.space {
width: 25em;
}
.filter {
width: 100%;
height: 5em;
background-color: darkblue
}
.item-list {
margin: 0.2em;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
You can avoid using Scroll on the main element by setting a static height on your header and using calc on your space element, just like the example..
html,
body {
margin: 0;
height: 100vh;
}
.header {
background-color: cadetblue;
height:20px;
width: 100%;
}
.space {
width: 25em;
height: calc(100% + -30px);
position:relative;
}
.filter {
width: 100%;
height: 20%;
background-color: darkblue
}
.item-list {
height: 80%;
margin: 0.2em;
overflow: auto;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<body>
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
remove overflow:auto from .item-list
and make the .item class height 100% instead of 20em.
Hope this will full full your requirement.
how can I make all divs get on the same line and fill div#2 the space between the left floated div#1 and right floated div#3?
Maybe flex will help you, here is an JSFiddle.
HTML
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
.parent {
display: -webkit-flex;
display: flex;
}
.div1 {
width: 30px;
height: 30px;
background: #FFCC99;
}
.div3 {
width: 30px;
height: 30px;
background: #FCF305;
}
.div2 {
-webkit-flex: auto;
flex: auto;
height: 30px;
background: #CCFFCC;
}
You could use display: table for this kind of implementation (note this is not using tables for layout):
html,
body {
margin: 0;
padding: 0;
}
.wrap {
display: table;
width: 100vw;
}
.one {
display: table-cell;
height: 50px;
width: 20%;
background: red;
}
.two {
display: table-cell;
height: 50%;
width: 60%;
background: cornflowerblue;
}
.three {
display: table-cell;
background: lime;
height: 50px;
}
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Notice how I haven't set a width on the last element, yet it's filling the rest of the space available?
Here's a dummy implementation:
<div id="l"></div>
<div id="r"></div>
<div id="c"></div>
<style>
#l {
float: left;
width:30%;
}
#r {
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>
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/