I've been working on a two row and 1 column layout with flexbox, I'm using flexbox because I don't think css2.1 can fill the remainding space for box-B. In my example of my jsFiddle, I can't get box-C to shift up on the right hand side and also I can't get box-B to flex vertically and fill the contents can someone please help me with this layout
jsFiddle here
#container {
background-color:red;
width:100%; height:100%
}
#three-box-layout {
display:flex;
display:-ms-flex;
display:-webkit-flexbox;
display:-moz-flex;
height:100%;
-ms-flex-direction:column;
-webkit-flex-direction:column
}
.shuffle-box {
}
#box-a {
background-color:#f601ff; -ms-flex-order:1; -webkit-flex-order:1;
margin-right:30%;
}
#box-b {
-ms-flex:3;
-webkit-flex:3;
-moz-flex:3;
flex:3;
background-color:#37fe02;
margin-right:30%;
}
#three-box-layout #box-c {
-ms-flex:3;
-webkit-flex:3;
-moz-flex:3;
flex:3;
background-color:#02effe;
margin-left:70%; float:right;
}
<div id="container">
<div id="three-box-layout">
<div id="box-a" class="shuffle-box">
<div style="height:425px; background-color:pink">A</div>
</div>
<div id="box-b">B</div>
<div id="box-c">C</div>
</div>
</div>
You can do this with CSS tables (Flexbox isn't necessary)
Resize the browser to see the media queries in action!
FIDDLE1 (little content) / FIDDLE2 (lots of content)
Markup
<div class="container">
<div class="row1">
<div>A</div>
<div></div> /* give this div table cell 50% width on wide screens */
</div>
<div class="row2">
<div>B</div>
<div>C</div>
</div>
</div>
CSS
--
.container {
width: 800px;
height: 500px;
display:table;
text-align: center;
position: relative;
}
.row1 {
display:table-row;
max-height: 425px;
background: pink;
}
.row1 div {
display:table-cell;
width:50%;
}
.row2 {
display:table-row;
height: 100%;
}
.row2 div {
width: 100%;
height: 100%;
float:left;
background: green;
}
.row2 div + div {
background: aqua;
width: 50%;
height: 100%;
position: absolute;
top:0;
right:0;
}
#media (max-width: 1024px) {
.row1 {
width: 100%;
}
.row1 div + div {
display: none;
}
.row2 div {
width: 50%;
}
.row2 div + div {
position: static;
}
}
Related
<div class="container">
<div class="child">
</div>
</div>
.container {
width: 800px;
height: 200px;
margin:auto;
}
now I want to give child width same as viewport width.
ps: 100vw is not working
Using 100vw isn't enough, you need to also center the element inside the container so it overflow equally on both sides.
Here is an example using flexbox to center:
.container {
width: 300px;
height: 150px;
margin: auto;
background:green;
display:flex;
justify-content:center;
}
.child {
width:100vw;
flex-shrink:0; /*to avoid the shrink effect*/
height:100px;
background:red;
color:#fff;
}
body {
margin:0;
}
<div class="container">
<div class="child">
some content
</div>
</div>
You can also consider negative margin to achieve the same without flexbox:
.container {
width: 300px;
height: 150px;
margin: auto;
background: green;
}
.child {
margin: 0 calc((300px - 100vw)/2);
height: 100px;
background: red;
color:#fff;
}
#media (max-width:300px) {
.child {
margin: 0;
}
}
body {
margin:0;
}
<div class="container">
<div class="child">
some content
</div>
</div>
Simple scenario - I would have thought.
The idea is that app-bar is a fixed height - set at 56px. The content DIV beneath should fill the remaining space - the height of the container is around 320px, which is set using a percentage of the parent.
If I use height:100%, the flexbox doesn't kick in, however, if I use height:320px it does.
Any ideas? The height needs to be a percentage, as it's filling the responsive parent.
<header class="img-app-bar">
<div class="container">
<div class="app-bar"></div>
<div class="content"></div>
</div>
</header>
.img-app-bar {
.container {
display:flex;
flex-direction:column;
background-color:Red;
height:100%;
.app-bar {
flex:0;
}
.content {
flex:1;
background-color:Yellow;
}
}
}
If the parent element doesn't have a height css style, percentage height for the child it isn't going to work (unless you use the absolute positioning hack) - that's just the way css works
A work around for your situation is to do the following (the aforementioned absolute position hack):
.img-app-bar {
position: relative;
/* the following is just for giving height without using height */
padding-top: 300px;
background: red;
}
.container {
/*this seems to set a height without setting a height*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.flex {
display: flex;
flex-direction: column;
height: 100%;
}
.app-bar {
height: 56px;
background: green;
}
.content {
flex:1;
background: blue;
}
<header class="img-app-bar">
<div class="container">
<div class="flex">
<div class="app-bar"></div>
<div class="content"></div>
</div>
</div>
</header>
The problem is that .img-app-bar needs a height, too. Otherwise your .container takes 100% height of 0.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.img-app-bar {
width: 100%;
height: 100%;
}
.container {
display:flex;
flex-direction:column;
background-color:Red;
height:100%;
}
.app-bar {
height: 56px;
}
.content {
flex:1;
background-color:Yellow;
}
<header class="img-app-bar">
<div class="container">
<div class="app-bar"></div>
<div class="content"></div>
</div>
</header>
I have following Scenario
http://jsfiddle.net/EYGhf/63/
<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>
</div>
I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom.
Current CSS that is applied goes as
.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; /* Just Example, Actual is Dynamic*/
width:100px;
float:left;
}
#second_div {
background: cyan;
height: 300px;/* Just Example, Actual is Dynamic*/
width:100px;
clear:left;
}
#third_div{
width:100px;
float:left;
background:blue;
}
You could set position:absolute on 3rd item, and use media queries set it back to static for mobile.
JSFiddle Demo: http://jsfiddle.net/ytr1j3r7/ (resize the output frame and see)
body {
margin: 0;
}
.wrapper {
position: relative;
max-width: 400px;
}
.wrapper > div {
height: 100px;
width: 200px;
}
#first_div {
background: yellow;
}
#second_div {
background: cyan;
}
#third_div {
background: teal;
position: absolute;
top: 0;
right: 0;
}
#media (max-width: 399px) {
#third_div {
position: static;
}
}
<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>
</div>
I have two divs in my page and I would like both to have its width and height set to the width and height of the browser, so that I have to scroll down to see the second div.
How is this possible?
Eidt: I forgot to mention that I also want the content in these divs to be vertically centered.
What I did until now is taking this links first answer and put that code into another div, which takes 100% of the height.
Here is what I have at the moment:
HTML:
<body>
<div id="first"><div class="outer"><div class="middle"><div class="inner"><h1>Title 1</h1></div></div></div></div>
<div id="second"><div class="outer"><div class="middle"><div class="inner"><h1>DTitle 2</h1></div></div></div></div>
</body>
CSS:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#first, #second {
height: 100%;
}
h1 {
text-align: center;
}
You can do something like:
HTML
html, body { height:100%; }
.box { height:100%; }
.one { background:#eee; }
.two { background:#ccc; }
CSS
<div class="box one">1</div>
<div class="box two">2</div>
JSFiddle Demo
I try to have a row with 3 divs.
The middle div should be responsive with a mex-width, remaining space left and write should be filled in with a color.
I know I could solve this using an wrapper with auto-margin left and right but I need to have the center div transparent and not showing the wrapper background color.
I tried to solve this using a display table but did not manage to do this.
<div id="table">
<div id="row">
<div id="left"></div>
<div id="middle">Row 1</div>
<div id="right"></div>
</div>
<div style="clear:both;"></div>
<div id="row">
<div id="left"></div>
<div id="middle">Row 2</div>
<div id="right"></div>
</div>
<div style="clear:both;"></div>
</div>
with css
#table {
width:100%;
display:table;
}
#row {
width:100%;
display:table-row;
margin-bottom:10px;
}
#left {
width:auto;
display:table-cell;
background-color: #FF0000;
}
#middle {
display:table-cell;
width:auto;
max-width: 100px;
height:50px;
background-color: #eeeeee;
}
#right {
width:auto;
display:table-cell;
background-color: #FF0000;
}
http://jsfiddle.net/thepofo/kdJHh/2/
Ideas are welcome.
The hacky way
http://jsfiddle.net/coma/rFg2L/2/
.foo {
overflow: hidden;
}
.foo > div {
position: relative;
margin: 0 auto;
max-width: 100px;
}
.foo > div:before,
.foo > div:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 999999px;
background-color: red;
}
.foo > div:before {
right: 100%;
}
.foo > div:after {
left: 100%;
}
The flexbox way (http://caniuse.com/#search=flex)
http://jsfiddle.net/coma/YYm32/
.foo {
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.foo > div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
.foo > div:nth-child(2) {
max-width: 100px;
}
.foo > div:first-child,
.foo > div:last-child {
background-color: red;
}
Bonus track
You don't need to add extra markup to clear your floats: http://jsfiddle.net/coma/Lqc2H/
This may or may not be enough to work for you, but how about setting the div to 33% width of the wrapper.
<div class="wrap">
<div class="left"> </div>
<div class="middle">Lorem ipsum dolor...</div>
<div class="right"> </div>
</div>
.wrap>div {
float:left;
width: 33%;
}
.middle {
max-width: 200px;
outline:1px solid;
}
fiddle here
Otherwise, you might want to consider media queries for specific widths.