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.
Related
I created an example with react:
Code Sandbox
As you can see here:
The columns are not aligned because of the dynamic width of each column.
What do I need to do if I want all the columns to stay aligned across all rows even when they need to shrink closer together because of the window size?
EDIT
Same problem with css-grid:
Code Sandbox 2
I modify your INDEX.TSX
class OrderRow extends React.Component<OrderRowProps> {
public render() {
const { index, order } = this.props;
return (
<div className="OrderRow">
<div className="OrderRowIndex">{index}</div>
<div className="columnGroup">
<OrderColumn values={order.number} />
<OrderColumn values={order.size} />
<OrderColumn values={order.amount} />
<OrderColumn values={order.price} />
<OrderColumn values={order.page} />
</div>
</div>
);
}
}
Also I Change many CSS.
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin: 0;
padding: 15px;
}
.Chunk {
flex-basis: 30px;
flex-grow: 0;
flex-shrink: 0;
max-width: 30px;
height: 30px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
.OrderColumn {
display: flex;
flex-direction: row;
justify-content: flex-end;
min-width: 300px;
max-width: 500px;
}
.columnGroup{
flex-basis: calc(100% - 30px);
flex-grow: 0;
flex-shrink: 0;
max-width: calc(100% - 30px);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.OrderColumn:first-child{
justify-content: flex-start;
}
.OrderRow {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.OrderRow > div {
/* flex: 1 1 0px; */
padding-left: 5px;
padding-right: 5px;
}
.OrderRowIndex {
flex-basis: 30px;
flex-grow: 0;
flex-shrink: 0;
max-width: 30px;
height: 30px;
/* margin-left: 5px;
margin-right: 5px; */
border: 1px solid black;
text-align: center;
vertical-align: middle;
display: inline-block;
line-height: 30px;
}
.Order {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 100%;
overflow-x: auto;
}
Here is your CodeSanBox. Now it's look like this.
The following is a solution I can live with:
Code Pen
Im using a grid with gridTemplateColumns being a minmax of minum pixel size and fr notation. Im still annoyed by the minimum pixel width because it is not dynamic. I would prefer if the minium width is always fitting to its content. So if there are 2 cells in a column it should be minimum of 60, if there are 3 it should be 90, and so on. So 30 px per cell.
I have the following in my HTML file:
<div class="container-box">
<div class="profile-box">
<div class="image-container">
<div class="profile-picture"></div>
</div>
</div>
</div>
In my CSS file, I have the following:
.container-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.profile-box {
height: 350px;
width: 500px;
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
This results in my profile-box being center-aligned, but I also want it vertically aligned. I have tried changing the flex-direction to row, but that only stretches it to take over all the horizontal space.
Here is a codepen: https://codepen.io/Humad/pen/rKLMeo
It is already centered, but your body and .container-box do not have a height set for it go in the center.
JSFiddle demo
body, html {
height: 100%; /* added */
width: 100%; /* added */
margin: 0; /* added */
}
.container-box {
height: 100%; /* added */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black;
}
I've developed the following layout using the Flexbox CSS model:
html {
box-sizing: border-box;
overflow-y: none;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
#all {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: #03a9f4;
}
#app {
width: 500px;
background: #ffffff;
border: solid 6px yellow;
}
header {
display: flex;
justify-content: center;
align-items: center;
border: solid 4px blue;
}
#header-para-container {
flex: 1;
}
#header-image-container {
flex: 0.6;
background: #888;
}
#header-image-container > img {
display: block;
width: 100%;
height: auto;
}
section {
display: flex;
flex-wrap: wrap;
border: solid 4px tomato;
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 50%;
border: solid 4px green;
}
figure > img {
max-width: 80%;
height: auto;
}
<div id="all">
<div id="app-container">
<div id="app">
<header>
<div id="header-para-container">
<p>Hello, this is CSS flexbox layout. Thank you for visiting this page.</p>
</div>
<div id="header-image-container">
<img src="http://placekitten.com/g/300/300" />
</div>
</header>
<section id="grid-images">
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
</section>
</div>
</div>
</div>
https://jsfiddle.net/petebere/fsLpw1vb/.
Would you know how to reduce responsively the height of the images and the main display element (in yellow frame) as the viewport height decreases?
The idea is that the element in yellow frame should be always fully visible and there should be no need for vertical scrolling.
At the moment when the viewport height drops, the height of the yellow container stays constant. This is probably because the browser wants to keep the sizes that I've applied to the container of the header image:
#header-image-container {
...
flex: 0.6;
...
}
and to the containers of the grid images:
figure {
...
flex-basis: 50%;
...
}
I've produced this graphic to show what I'm trying to achieve when the window height is reduced:
The images aren't scaling because they aren't bound by a fixed height on their immediate containers.
For example, the first image in the layout (in the header section), has neither a parent (.header-image-container) nor a grandparent (header) with a defined height. Here's the actual code:
header {
display: flex;
justify-content: center;
align-items: center;
border: solid 4px blue;
}
#header-image-container {
flex: 0.6;
background: #888;
}
With the code above, the image has no need to be responsive. There is no height confinement.
Try this instead:
header {
display: flex;
justify-content: center;
align-items: center;
border: solid 4px blue;
height: 20vh; /* NEW */
}
#header-image-container {
flex: 0.6;
background: #888;
height: 100%; /* NEW */
}
#header-image-container > img {
/* display: block; */
/* width: 100%; */
/* height: auto; */
height: 100%; /* NEW */
}
revised demo
The same concept above applies to the #grid-images section:
section {
display: flex;
flex-wrap: wrap;
border: solid 4px tomato;
height: 60vh; /* NEW */
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 50%;
border: solid 4px green;
height: 50%; /* NEW */
}
figure > img {
/* max-width: 80%; */
/* height: auto; */
height: 100%; /* NEW */
}
revised demo
Additional notes:
In your original code you're trying to make your images responsive with width: 100%; height: auto (in the header section) and max-width: 80%; height: auto (in the grid section). This set-up (using percentage widths) is more suited for horizontal screen re-sizing. Your question seeks vertical re-sizing, so use percentage heights instead.
In your original layout, you may have noticed that when you reduce the screen height, the layout disappears at the top of the screen, with no access via vertical scroll. This is a known issue with flexbox. The solution is to use margin: auto on the centered flex item, instead of justify-content: center; align-items: center on the flex container. Full details here: Can't scroll to top of flex item that is overflowing container
I want to stretch two div elements (.sideline and .main-contents) to reach the bottom of the page and stay at a certain height from the footer.
The two divs are nested inside a div (.row-elements) with the flex-direction: row since I wanted them to be on the same row.
/* body {
display:flex;
flex-direction:column;
} */
.one-above-all {
display: flex;
flex-direction: column;
/* flex: 1 0 auto; */
/* min-height: 1100px; */
border: solid black 1px;
}
.top-block {
margin: 0 auto;
border: solid black 1px;
width: 300px;
height: 30px;
margin-top: -15px;
}
.headline {
border: solid black 1px;
width: 90%;
align-self: flex-end;
margin-top: 40px;
margin-right: 10px;
height: 160px;
display: flex;
box-sizing: border-box;
}
.row-elements {
display: flex;
flex-direction: row;
margin-top: 40px;
align-items: stretch;
/* min-height: 900px;
flex: 1 0 auto;
*/
}
.sideline {
width: 160px;
border: solid 1px;
margin-left: calc(10% - 10px);
box-sizing: border-box;
flex-shrink: 1
}
.main-contents {
border: solid 1px;
margin-left: 40px;
/* align-self: stretch; */
flex: 1 1 auto;
margin-right: 10px;
box-sizing: border-box;
}
.bottom-block {
align-self: flex-end;
margin-top: auto;
border: black solid 1px;
margin: auto;
width: 300px;
height: 30px;
margin-bottom: -10px;
/* margin-top: 880px; */
}
/* .stretch-test {
border:solid, 1px;
display: flex;
flex-direction: column;
flex: 1 0 auto;
} */
<div class="one-above-all">
<div class="top-block"></div>
<div class="headline"></div>
<!-- <div class="stretch-test"> -->
<div class="row-elements">
<div class="sideline"></div>
<div class="main-contents">jhjkdhfjksdhafjksdahfl</div>
<!--</div> -->
</div>
</div>
<div class="bottom-block">footer</div>
Codepen
The commented out code in the css is the things I have tried.
I tried to set the body as flex and give the row-elements class flex property of 1 0 auto which didn't work.
I tried nesting the row-elements class (which has the flex-direction of row) in another div with a flex-direction of column and setting .row-elements to flex:1 0 auto which also didn't work.
I tried totally removing the the row-elements class but the two divs won't come on the same row.
Any solution will be appreciated.
To stick the footer to the bottom, here are two methods:
Method #1: justify-content: space-between
Align the container vertically with flex-direction: column. Then pin the last element to the bottom with justify-content: space-between.
revised codepen
Method #2: auto margins
Also with the container in column-direction, apply margin-top: auto to the footer, which spaces it away from the other flex items. (Seems you're already familiar with this method.)
Here's a detailed explanation for both: Methods for Aligning Flex Items
Make sure to define a height for your container, unless you simply want content height. In my example I've used height: 100vh on body.
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