I'm attempting to create a flexbox with a header and footer of a set height and have a flexible content area that may or may not scroll depending on the amount of content within.
You can see my fiddle here http://jsfiddle.net/evilbuck/EtQXf/3/
This works in FF, chrome, but not IE10. IE10 seems to not respect the overflow property and bleeds into the content below.
My expectation is that the .content area will expand to fill the remaining space of it's parent and scroll when necessary.
<div class="container">
<header>A header</header>
<div class="content">Some content that will overflow or not.</div>
<footer>A footer</footer>
</div>
.container {
margin: 10px auto;
width: 300px;
height: 350px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
}
header, footer {
border: 1px solid grey;
height: 30px;
padding: 5px;
text-align: center;
clear: both;
}
.content {
flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
overflow: auto;
}
What am I doing wrong here?
I'll leave this here for others, but the short of it is that I needed to use
display: -ms-flexbox;
updated fiddle: http://jsfiddle.net/EtQXf/4/
Related
I'm using amchart and I want to display multiple charts in one page (as columns), my problem is that I don't want scroll bar no matter how many charts I add (yes I want them to squish) also when I display only one chart I want it in it's normal size (not squished or small)
How can I achieve that?
I'm trying now with images and if it works I will do it on my charts.
html:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
</div>
css:
body{ overflow-y : hidden;}
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
img {max-height:100%;}
on jsfiddle: http://jsfiddle.net/89dtxt6s/356/
Thanks!
Step 1: Add the following to .row to ensure it fills the viewport height:
.row {
height: 100vh;
}
Step 2: You need to give each .cell a flex display. Additionally, you'll need to adjust your flex-basis (third argument to the shorthand) to 100%. Finally, you'll need to set min-height to zero, in order for each element to totally shrink, if need be.
.cell {
display: flex;
flex-direction: column;
flex: 1 1 100%; /* no longer auto */
min-height: 0;
}
Step 3: Add a one-hundred percent width and height to the image.
img {
width: 100%;
height: 100%;
}
Result: squishy images. Ugly? Sure. But I'm not judging.
https://jsfiddle.net/jaunkv7k/
I am trying to make a very simple .html for the purpose of learning.
I'm trying to put two divs each next to each other, but I can not accomplish that.
So far I managed to do it, but if I add the property of the "width" it goes down, if I put a float: left; It works but the other div does not fill the rest of the page. .
Style
#video{
width: 50%;
height: 100%;
border-style: solid;
float: left;
}
#chat{
width: 50%;
height: 100%;
border-style: solid;
float: left;
}
#caja{
overflow: hidden;
}
</head>
<body>
<div id="caja">
<div id="video">
TEST
</div>
<div id="chat">
TEST
</div>
</div>
</body>
Your border overflows here.
Try setting box-sizing: border-box to both divs:
#video{
width: 50%;
height: 100%;
border-style: solid;
float: left;
box-sizing: border-box;
}
#chat{
width: 50%;
height: 100%;
border-style: solid;
float: left;
box-sizing: border-box;
}
The border is part of the equation although you haven't specified a size.
Border-box would set the border inside the box. Not sure if this is different in each browser or not.
MDN box-sizing
Use display: inline with width of 50% for inner divs.
The following css would resolve the issue.
CSS
#video{
width: 50%;
height: 100%;
border-style: solid;
display: inline;
box-sizing: border-box;
}
#chat{
width: 50%;
height: 100%;
border-style: solid;
display: inline;
box-sizing: border-box;
}
#caja{
width: 100%;
}
HTML
<div id="caja">
<div id="video">
TEST
</div>
<div id="chat">
TEST
</div>
</div>
https://jsfiddle.net/uo5qfj2t/
You could use another approach with flexbox:
#video {
width:50%;
border-style: solid;
}
#chat {
width:50%;
border-style: solid;
}
#caja {
display: flex;
flex-wrap: nowrap;
}
I would drop floats and use flexbox.
Here is a codepen I made with a bunch of goodies.
See the Pen Simple flexbox layout by Craig Curtis (#craigocurtis) on CodePen.
HTML
<div id="caja" class="flex-container fullheight fullwidth">
<div id="video" class="flex-item-6 flex-container-vh-center">
<div class="flex-item">Video</div>
</div>
<div id="chat" class="flex-item-6 flex-container-vh-center">
<div class="flex-item">Chat</div>
</div>
</div>
CSS
/* body reset - to get rid of default margins */
body {
margin: 0;
}
/* basic horizontal alignment */
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/* based off of 12-column layout (like Bootstrap) */
.flex-item-6 {
-webkit-flex: 0 1 50%;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* perfect vertical and horizontal centering */
.flex-container-vh-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* simple flex item child maintaining original dimensions */
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* full height */
.fullheight {
/* a nice way to get the viewport height in percentage */
min-height: 100vh;
}
.fullwidth {
/* another good way to get the viewport width in percentage */
width: 100vw;
}
#caja {
/* I can relax! */
}
#video, #chat {
/* rems are better than px since px keep getting smaller. rems are units based off of hte root font size, and don't change */
border: 0.25rem solid black;
color: white;
font-size: 4rem;
font-family: sans-serif; /* a more readable font family */
}
#video {
/* just a fun gradient with ridiculous html colors */
background: linear-gradient(lime,tomato);
}
#chat {
/* a better way of controlling colors via rgba alpha scale, good for transparent-esque overlays */
background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.75));
}
Drop floats, because they pull content out of the normal flow and get real buggy and require clearfixes, use flexbox instead.
Use reusable classes instead of id's.
This code may look daunting, but there is a super easy way to create quick layouts. Play with Flexy Box - it will solve nearly all of your layout headaches!
http://the-echoplex.net/flexyboxes/
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Add this property also due to border on div total width of div will be 50% + width of border and this property include border in width.
I got a situation where flex box is not working the way I want it to within Chrome but it works in other browsers (apart from iOS mobile devices).
I am struggling to vertically align any content within Chrome but works in everything else. Any ideas?
Also, does anyone know a way I can dynamically stretch a div to a certain % of the div class content which will also work within chrome?
Thanks in advance. See the bottom for demo and screenshots.
HTML
<div class="container">
<div class="content">
<h2>Ticket System <span style="color:#339933; font-weight:bold;">Open</span> Customer Ticket List</h2>
<a class="BlueButton" href="ticket_view_cust_ticket.php">Open Customer Tickets</a>
<a class="BlueButton" href="ticket_view_cust_ticket_rejected.php">Rejected Customer Tickets</a>
<div class="centerContent">
There are currently no open customer tickets
</div>
</div>
</div>
CSS
html,body
{
height: 100vh;
}
body
{
display: table;
margin: 0 auto;
font-family: Tahoma,Arial,Sans-Serif;
}
.container
{
height: 98vh;
vertical-align: middle;
width: 70vw;
min-width:1024px;
margin-left:auto;
margin-right:auto;
margin-top: 1vh;
display: flex;
flex-direction: column;
}
.content
{
background-color: #ff0000;
flex: auto;
webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
-o-flex-shrink: 0;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
}
.centerContent
{
height: 95%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
Demo - https://jsfiddle.net/qr2tpgo6/1/
Container Screenshot - http://prntscr.com/azp8bk
Firefox - http://prntscr.com/azp4oj
Chrome - http://prntscr.com/azp4hy
Your container is missing display: flex, so flex properties aren't working.
Add this:
.content
{
background-color: #ff0000;
flex: auto;
flex-direction: column;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
display: flex; /* new; establish flex container */
justify-content: center; /* new; center children vertically */
}
Revised Fiddle
I am working on a webpage which has a sidebar and a main section. The CSS / HTML essentially look like this:
<html><head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
#sidebar {
float: right;
min-width: 220px;
height: 200px;
background-color: Red;
}
#content {
background-color: #f0f0f0;
height: 200px;
overflow: hidden;
}
#media screen and (max-width: 450px) {
#sidebar {
float: none;
}
}
</style></head>
<body>
<div>
<div id="sidebar">
</div>
<div id="content">
</div>
</div>
</body></html>
So the idea is that when displayed side-by-side, the content div takes up the width of the window not used by the sidebar, but when we move to mobile sized screens the sidebar div stops floating and moves inline.
This is fine for the desktop site, but on the mobile site, because I have put my sidebar div before my main div, the sidebar appears first, and I want it to appear below.
Is there an easy / generally practised solution to this that doesn't involve using javascript to move the divs around after load? Should I be taking a different approach?
Yes, you can. There are two ways you can go about it:
Legacy solution
Put your sidebar after your content and float:right your main content container on desktop size. This way the sidebar will be on the left on desktop but displayed after the main content on mobile.
body {margin: 0;}
.main-wrapper >*{
box-sizing: border-box;
padding: 20px;
display: inline-block;
min-height: 200px;
}
#sidebar {
background-color: Red;
min-width: 30%;
max-width: 30%;
min-height: 200px;
}
#content {
background-color: #999;
float: right;
width: 70%;
}
#media screen and (max-width: 450px) {
#content,#sidebar {
float: none;
width: 100%;
min-width: initial;
max-width: initial;
}
}
<div class="main-wrapper">
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
</div>
Modern solution
Use order (flexbox).
body {margin: 0;}
.main-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
min-height: 100vh;
}
#sidebar, #content {
padding: 20px;
box-sizing: border-box;
}
#sidebar {
background-color: red;
-webkit-box-flex: 0;
-webkit-flex: 0 0 30%;
-ms-flex: 0 0 30%;
flex: 0 0 30%;
}
#content {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#media (max-width: 450px) {
.main-wrapper{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#sidebar, #content {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
#sidebar {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
}
<div class="main-wrapper">
<div id="sidebar">
sidebar
</div>
<div id="content">
content
</div>
</div>
For this, if you want to make the development easier and with limited use of JavaScript I recommend you take a look at the Bootstrap framework. This implements a new and intuitive class system that allows for dynamic scaling through CSS classes in your HTML instead of JavaScript.
Take a look, it's becoming pretty standard for many webpages and what you want should be pretty easy to do with the framework.
Hope this helps:)
I'm working with this layout.
I want to add a div next to content div.
I tried:
HTML:
<div class="container">
<header>here is the header </header>
<div class="sidebar">my sidebar content</div>
<div class="content">
/my text
</div>
<footer>
and the footer
</footer>
</div>
CSS:
.sidebar{
width: 100px;
float: left;
}
{
margin:0;padding:0;
}
html,body
{
height: 100%;
}
.container
{
-ms-box-orient: vertical;
display: -ms-flex;
height: 100%;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-flex;
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, footer
{
width: 300px;
}
.content{
width: 200px;
}
header
{
background: yellow;
}
.content
{
background: pink;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: auto;
height:0;
min-height: 0;
}
footer
{
background: gray;
height: 80px;
}
and changed the width but nothing happened. The new div stands on the bottom of the content div.
How can I fix this?
I think you need this:
DEMO
Wrap your content div's text in another div lft with float:left css then wrap lft and sidebar divs to content div
HTML
<div class="container">
<header>Your header</header>
<div class="content">
<div class="lft">Your text</div>
<div class="sidebar">Your Sidebar content</div>
</div>
<footer>Your footer</footer>
</div>
CSS
header, .content, footer {
width: 300px;
}
.lft {
width: 200px;
float: left;
}
.sidebar {
width: 100px;
float: right;
}
jsfiddle
are you tring to do this
*
{
margin:0;padding:0;
}
html,body
{
height: 100%;
}
.container
{
-ms-box-orient: vertical;
display: -ms-flex;
width:400px;
height: 100%;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-flex;
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, .content, footer
{
width: 200px;
}
header
{
background: yellow;
}
.row{
-ms-box-orient: vertical;
display: -ms-flex;
width:400px;
height: 200px;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-flex;
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.row,.content,.sidebar
{
background: pink;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: auto;
}
footer
{
background: gray;
height: 80px;
}
Float properties on flex items are ignored. So, any float set on .sidebar or .content will not work. This is by design in the flexbox spec: http://www.w3.org/TR/css3-flexbox/#flex-containers.
You could work around this by wrapping the .content and .sidebar elements in another element, and then use either floats inside it, or set the wrapper element to be a flex container in the column direction. Example:
<header></header>
<div class="content"><!-- set this to be the flex item, eg. flex: 1 1 auto; -->
<div class="content-inner"></div>
<div class="sidebar"></div><!-- float this, for example. -->
</div>
<footer></footer>
The important point is that flexbox will only allow you to line up (and distribute & size) elements in 1 direction (row OR column). It can allow wrapping, but you can't divide flex items in both the column and row directions at once. If you need layouts like the one you describe, you need to nest stuff.