This question already has answers here:
Prevent flex items from stretching
(2 answers)
Closed 3 years ago.
In the following image, the button is taking the height of the flexbox? Why? I want it to be a regular button bottom-aligned with the image on the left (the white square).
index.css
.grid-container{
display:grid;
grid-template-rows:[nav-row-start]auto [nav-row-end logo-nav-row-start] auto [logo-nav-row-end content-row-start] auto [content-row-end];
}
.nav-style{
height:5vh; /*make nav div take 5% of space of viewport*/
background-color:black;
}
.logo-nav-style{
height:20vh;/*make logo-nav div take 20% of space of viewport*/
background-color:gray;
}
.nav-flexbox-container{
display:flex;
flex-direction:row-reverse;
}
.logo-nav-flexbox-container{
display:flex;
}
.content-style{
height:75vh;/*make content div take 75% of space of viewport*/
background-color:white;
}
#nav{
grid-row:nav-row-start/nav-row-end;
margin:0px;
}
#logo-nav{
grid-row:logo-nav-row-start/logo-nav-row-end;
margin:0px;
}
#content{
grid-row:body-row-start/body-row-end;
margin:0px;
}
#profile-pic {
margin:5px;
}
#mail-icon-pic{
margin:5px;
}
#stats-icon-pic{
margin:5px;
}
#logo-image{
/*the max width and max height rule will make the image fit inside the div. If the image is bigger than div, the image will
contract, if the image is smaller than the div, the image will expand*/
max-width:100%;
max-height:100%;
}
body{
margin:0px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Something</title>
</head>
<body>
<div class="grid-container">
<div id="nav" class="nav-style nav-flexbox-container">
<img id="stats-icon-pic" src="stats_icon.png">
<img id="mail-icon-pic" src="mail_icon.png">
</div>
<div id="logo-nav" class="logo-nav-style logo-nav-flexbox-container">
<img id="logo-image" src="example_logo.png">
<button type="button">Questions</button>
</div>
<div id="content" class="content-style">body</div>
</div>
</body>
</html>
The align-items flexbox property is set to stretch. See CSS tricks on flexbox.
Use this:
.logo-nav-flexbox-container{
display:flex;
align-items: flex-start;
}
I had to add align-items: flex-end rule
.logo-nav-flexbox-container{
display:flex;
align-items: flex-end;
}
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 4 years ago.
I want to achieve the following behavior like in the image
So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:
<body>
<div class="header">
My header<br> Arbitrary height (ex: 123px)
</div>
<div class="container">
Container <br> Height = rest of the viewport
</div>
</body>
Note: I don't want to use .container{ height: calc(100% - 123px) } because the in the future 123px may change, so I don't want to modify in two places.
You can use flexbox for this:
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.header {
height: 123px; /* whatever height you want */
background:green;
}
.container {
flex-grow: 1;
background:beige;
}
<div class="header"></div>
<div class="container"></div>
See following example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html,
body {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
padding:0;
margin:0;
}
.container {
flex: 1;
overflow:auto;
padding:10px;
}
.header {
background-color:green;
}
</style>
</head>
<body>
<div class="header">
<p>My header<br> Arbitrary height (ex: 123px)</p>
<p>My header<br> Arbitrary height (ex: 123px)</p>
</div>
<div class="container">
Container <br> Height = rest of the viewport
</div>
</body>
</html>
Hey I am currently rocking a flex box layout.
I am having an issue in chrome where a space in the label div seems to be creating some extra space at the bottom of the row for no reason, in internet explorer it is fine and in chrome with no space it is fine.
<!DOCTYPE html>
<html>
<head>
<style>
div.popup-body{
width:500px;
margin:0 auto;
}
div.popup-form-container{
display:flex;
flex:1;
flex-direction:column;
background-color:green;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-self: center;
}
div.popup-form-control-container{
box-sizing: border-box;
}
div.checkbox-container{
display:flex;
flex:1;
flex-direction:row;
}
div.checkbox-label{
flex:1;
font-family:Segoe UI;
background-color:lightgrey;
padding:10px;
text-align:center;
box-sizing:border-box;
}
div.checkbox-control{
flex:1;
font-family:Segoe UI;
background-color:white;
padding:10px;
text-align:center;
box-sizing:border-box;
}
div.field{
flex:none;
background-color:purple;
border: 5px solid yellow;
}
</style>
</head>
<body>
<div class="popup-body">
<div class="popup-form-container">
<div class="field">
<div class="popup-form-control-container">
<div class="checkbox-container">
<div class="checkbox-label">Hello world</div>
<div class="checkbox-control">
<input type="checkbox"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS FIDDLE: https://jsfiddle.net/4246r1f1/
Screen shots:
Chrome error (space)
Chrome ok (no space)
IE ok (space)
When you use flexboxes you need to understand which properties are for the container flexbox and which are related to child/items( check this article );
For ex. setting flex:1 on an item without a container display:flex doesn't make sense (found some of these in your code...)
Correcting these the .field doesn't overflow (tested on chrome and ff);
fiddle
Also, I would like to center verticaly and horizontally things inside div. I tried, but nothing worked for me. I tried, adding absolute position. Then I can set width and height normally, but then I have problems width text(s) inside div: I cant center it vertically
Here is simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.Table{
background-color:red;
display:table;
height:400px;
width:300px;
}
.Row1{
background-color:blue;
display:table-row;
text-align:center;
vertical-align:middle;
width:20px;
height:100px;
position:relative;
}
</style>
<div class="Table">
<div class="Row1">
<p>Row1</p>
<!--<div class="Cell1"></div>
<div class="Cell2"></div>
<div class="Cell3"></div>-->
</div>
<div class="Row2">
<p>Test</p>
</div>
</div>
</body>
</html>
I think one solution is: Display inner div again as table, then set paragraph as table-cell. After that, I can easy center things using align-text or vertically-align. Also I can easily set width and height of this div.
You're question really isn't very clear. You cannot set the width of a table-row (it spans the entire width of the table) but you can set the width of a cell.
Here's an example CSS table with content centred in each cell.
HTML:
<div class="table">
<div>
<div class="cell1">Cell1</div>
<div>Cell2</div>
<div>Cell3</div>
</div>
<div>
<div>Cell4</div>
<div>Cell5</div>
<div>Cell6</div>
</div>
</div>
CSS:
.table {
/* a table */
display:table;
height:400px;
width:300px;
border-collapse:collapse;
}
.table > div {
/* rows */
background-color:blue;
display:table-row;
}
.table > div > div {
/* cells */
background-color:pink;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
.table .cell1 {
/* a specific cell */
width:20px;
background-color:lime;
}
http://jsfiddle.net/TU9rj/
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
I have a center aligned with 1060px width. Within this, I have two more divs as and with different background color/images and width of 260px and 800px respectively.
Now I need to make the height of the two child divs same, irrespective of the content inside them. If “child1” has huge content and we need to scroll down the browser to see it and “child2” has less content, then also “child2” should have the height extended to match with the “child1”. On the other hand if both “child1” and “child2” has less content and does not produce browser scroll, then both of the should occupy the height of the browser window. The code snippet is given below.
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
.parent { clear:both; margin:auto; width:1060px; }
.child1 { background-color:#999999; float:left; width:260px; }
.child2 { background-color:#99CC00; float:left; width:800px; }
.child1a, child2a { float:left; width:100%; }
.child2a { border-bottom:1px solid #000000; height:500px; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">
<div class="child1a">1</div>
<div class="child1a">2</div>
<div class="child1a">3</div>
</div>
<div class="child2">
<div class="child2a">1</div>
<div class="child2a">2</div>
<div class="child2a">3</div>
</div>
</div>
</body>
</html>
Is it possible to solve it using only CSS, or need to use JavaScript?
You can do using 'display:table-cell' .
http://jsfiddle.net/sWHKs/