I have two flex elements and I need space between them,
I added a margin-right between them and it looks great, but the problem is when the screen is get smallest the second element go down to the new line and I have aredudant margin-right:30px and it not looks good.
How can I solve it:
I dont want to use a window resize event because if you open this ui in mobile so in the begining you have these two items in seperate lines.
.item-target-scale {
flex: 3;
min-width: 186px;
display: inline-block;
text-align: left;
margin-right: 30px;
}
.item-target-bar {
flex:1;
min-width: 100px;
display: inline-block;
}
Use media query for this purpose. Inspect your page and find out when does the line break occur(use devtools it gives precise viewport width in pixels).
#media screen and (min-width:'calculated'px)
{
.item-target-scale {
margin-right: 0px;
}
}
Hopefully this is what you need.
EDIT:
Use this if the element size is not fixed:
function myFunction(){
var i=document.getElementById("target1").offsetWidth+document.getElementById("target2").offsetWidth+50;
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(i>=w)
{
document.getElementById("target1").style.marginRight="0px";
}
else
{
document.getElementById("target1").style.marginRight="30px";
}
}
.item-target-scale {
flex: 3;
min-width: 186px;
display: inline-block;
text-align: left;
margin-right: 30px;
background:green;
}
.item-target-bar {
flex:1;
min-width: 100px;
display: inline-block;
background:red;
}
<body onresize="myFunction()" onload="myFunction()">
<div class="item-target-scale" id="target1">
dwdwdwdwd
</div>
<div class="item-target-bar" id="target2">
eegerg
</div>
</body>
I will need the HTML code to get the rest of the item's size but that can be done by inspecting. So, just add the remaining element's width in 'i'.
I would suggest wrapping these two elements in parent element and using justify-content: space-between property.
.parent {
display: flex;
justify-content: space-between;
width: 50%;
}
.child {
height: 20px;
width: 50px;
background: red;
}
<div class="parent">
<div class="child child1">
</div>
<div class="child child2">
</div>
</div>
Related
I'm trying to create a panel with two sections, as shown above: a light green section on the left and the dark green wrapped around the light green box.
How can I achieve this? I tried putting a span with inline-block inside a div and tried height and width properties but it doesn't produce the desired effect.
Flexbox can help with this.
Create a container with display: flex property
Create two divs within this container and add a flex-basis property to each that equals panel width of 100% or desired number of pixel length
E.g. .panel { width = 500px; }, .div1 { flex-basis: 100px; }, .div2 { flex-basis: 400px; }
E.g. .panel { width = 100% }, .div { flex-basis: 25%; }, .div2 { flex-basis: 75%; }
Style divs (sections) accordingly - height, background-color, border, etc.
Within the second div (right section) add your icons and style as well
I used FontAwesome CDN for the icons.
Hope this helped, you can also see this Codepen I created.
HTML
<div class="container">
<div class="div1"></div>
<div class="div2">
<i class="fas fa-plus-square"></i>
<i class="fas fa-sync-alt"></i>
</div>
</div>
CSS
.container {
display: flex;
}
.container div{
height: 25px;
width: 100%;
}
.div1{
background-color:#abffb9;
flex-basis: 2%;
border: 1px solid #5cb85b;
}
.div2{
background-color:#5cb85b;
flex-basis: 98%;
text-align: right;
border: 1px solid #5cb85b;
}
.fas {
color: #fff;
}
Is this what you are after?
Flexbox is realy good for just this, you can read more about flexbox here.
.wrapper {
display: flex;
padding: 2px;
background-color: green;
}
.green-box {
flex: 0;
min-width: 20px;
background-color: Chartreuse;
}
.filler {
flex: 1;
text-align: right;
}
<div class="wrapper">
<div class="green-box">
</div>
<div class="filler">
Icon
</div>
</div>
I have four items with same width. I need them to be stretched inside the fluid container. Whenever I resize the window, the gap between each item should adjust in such a way that the items are still stretching inside the container. Here is the image of what I want.
Here is the code, I have tried:
.parent {
margin-top: 40px;
background-color: beige;
}
.parent::after {
content:"";
clear: both;
display: block;
}
.child {
width: 20px;
height: 20px;
background-color: tomato;
margin-left: 20%;
float: left;
}
Fiddle
For limited known items:
Suppose, we know the number of items present in a container. Lets say the items to be 4. Lets wrap those items in separate sections each and give those sections float: left and width: 25%. Here I am giving width: 25% because there are four sections which need to cover the container completely i.e 100/4 = 25%. This will result in something similar view as shown below in the image:
As you can see in the above image, the items are still not aligned to each other. We can see gap between the last item and the container. But if you ignore the gap, you can see that the items are equally aligned to each other.
So now we should just be able to remove the width of the section holding the last item. This can be done using :last-child selection. Since, the last item holder is now hidden, we need to stretch other child holders. Hence, we need to divide 100% by 3 instead of 4.
.child-holder{
width: 33.3%; /* Instead of 25% */
}
.child-holder:last-child {
width: 0px;
}
It stretches the items but this hides the last item. As you can see in the below image:
We can solve this by giving negative margin-left to each item with value equal to the items. Applying so, will now hides the first item. So, give margin-left to the container equal to the item's width (positive value).
.parent {
margin-left: 20px; /* This value is equal to the item's width */
}
.child {
width: 20px;
height: 20px;
background-color: black;
margin-left: -20px; /* negative margin equal to its width */
}
Hence, this will give the solution we want:
Working Fiddle
For unknown number of items:
For unknown number of items, we will replace float: left to the item holding sections with display: table-cell and to stretch those sections, we will apply display: table; width: 100%; to the parent container. and since we must apply margin-left value equal to the item's width, we will have a parent wrapper, to which we apply margin-left instead. (Because, if we apply margin-left and width: 100% to same element, then the element will overflow)
Though we are giving width: 0px to the last item holder section, it is still occupying the space.
This can be solved by applying table-layout: fixed to the parent container. This will give us the solution:
Working Fiddle
This solution will work for any number of items, added dynamically or static. It will get automatically adjusted.
For Unknown number of items with unequal widths:
For unequal/unknown width of items, we should definitely go with javascript. Here is the small code which I wrote to use in one of the projects:
function setAlign(parentClass, childCommonClass) {
var childDivs = document.getElementsByClassName(childCommonClass);
var childDivsTotalWidth = 0;
var childDivsLength = childDivs.length;
var parentElement = document.getElementsByClassName(parentClass)[0];
var parentElementWidth = parentElement.offsetWidth;
for (var i = 0; i < childDivsLength; i++) {
childDivsTotalWidth += childDivs[i].offsetWidth;
}
var remainingWidth = parentElementWidth - childDivsTotalWidth;
var gap = remainingWidth / (childDivsLength - 1);
var leftWidth = 0;
for (var j = 0; j < childDivsLength; j++) {
if (j > 0) {
leftWidth += gap + childDivs[j - 1].offsetWidth;
}
childDivs[j].style.left = leftWidth + "px";
}
}
window.onload = setAlign('row', 'box');
window.onresize = function () {
setAlign('row', 'box');
}
Working Fiddle
Flex
This can be done with display: flex; or flexbox
Property your after is justify-content: space-between; this will display all the item evenly distributed along the container with the fist and last element at the start and end of the container.
.container {
margin-top: 50px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
background-color: whitesmoke;
}
.item {
width: 50px;
height: 50px;
background-color: tomato;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
THERE is so much more
Different sizes
Lets say the content size is not known:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
background-color: whitesmoke;
align-items: center;
}
.item {
width: 50px;
height: 50px;
background-color: tomato;
}
.one {
width: 100px;
height: 20px;
}
.two {
width: 20px;
height: 100px;
}
.three {
width: 50px;
height: 70px;
}
.four {
width: 70px;
height: 70px;
}
.headline {
font-size: 20px;
}
<h2>Different sizes</h2>
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
</div>
Column
More of a vertical person then a horizontal one?
No problem.
.container {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
background-color: whitesmoke;
align-items: center;
height: 500px;
}
.item {
width: 50px;
height: 50px;
background-color: lime;
}
.item2 {
width: 150px;
height: 50px;
background-color: tomato;
}
<div class="container">
<div class="item"></div>
<div class="item2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Can i use it?
The support is really good, its just that IE is a tiny bit behind the rest...
So only IE10 (semi) IE 11 full
Links:
MDN Good thorough documentation
CSS-tricks My person favorite
I would like to achieve a layout that looks like this:
I am interested in a css/html only solution, so no javascript required.
The widths of both divs are dynamic, so I cannot use any static margins.
The spacing between the sides of the divs, and the top, should be the same.
I tried using margin: auto auto 0 auto on the inner div, as you can see in this jsfiddle, but it only works for left and right.
Note, the following attempt doesn't answer the question fully, since the width of the child cannot be dynamic.
The idea is to use a percentage width + percentage margin-top values on the child. It's a responsive layout, see the comments in the code, and try it out on different window sizes.
JSFiddle: http://jsfiddle.net/jkoycs6e/
body {
margin: 0;
}
.outer {
height: 100vh; /*for demo only*/
background: teal;
overflow: auto;
}
.inner {
width: 80%;
background: gold;
margin: auto;
margin-top: 10%; /* 100%-80%/2 */
}
<div class="outer">
<div class="inner">
hello<br/>hello<br/>hello
</div>
</div>
This is not possible. At least not without using javascript. There is no css-only solution.
If you put align="center" in your div you'll get to the middle of the screen every time but it's not going to be supported in HTML5 so I recommend the 50:50 approach.
div
{
text-align:center;
margin-top:50%;
margin-bottom:50%;
}
Hope that helps. ^^
Set the outer parent's overflow to auto and give your margin-top a relative value. Something like this:
.outer {
background: blue;
overflow: auto;
}
.inner {
background:yellow;
width: 100px;
height: 100px;
margin: 1em auto 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
This seems to work:
.outer {
height: 500px;
width: 300px;
background: blue;
position: relative;
}
.inner {
width: 80%;
height: 200px;
background:green;
position: absolute;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 0;
}
You can change the percentages marked for the margins as per your intended value for k.
Here's the fiddle
EDIT: Note that the width of inner has to be set in terms of percentages for this to work. Also note that when a margin is specified in terms of percentage, the margin's value is computed as a percentage of the width of the container. Even for the vertical margins, the percentage is applied on the width (and NOT the height) of the container.
Here's an SO post that's helpful in understanding how to position elements with respect to their container.
This answer doesn't actually make use of the margin property, nor does it have only two div.
body {
font-size: 26px;
text-align: center;
font-family: monospace;
}
#container {
display: inline-block;
position: relative;
width: 100%;
}
#dummy {
margin-top: 20%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver
/* show me! */
}
#wrapper {
display: table;
width: 100%;
}
#row {
display: table-header-group;
}
#left {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
#incenter {
display: table-cell;
background-color: aqua;
}
#right {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
<div>
<div id="container">
<div id="dummy"></div>
<div id="element">
k (20%)
</div>
</div>
<div id="wrapper">
<div id="row">
<div id="left">width = k (20%)</div>
<div id="incenter">incenter</div>
<div id="right">width = k (20%)</div>
</div>
</div>
</div>
Another example with measurements in pixels is here.
For explanation refer:
https://stackoverflow.com/a/12121309/2534513
https://stackoverflow.com/a/6615994/2534513
I have actually combined techniques mentioned in above two answers to make this one.
Using JavaScript would have been a lot easier.
How can I force a DIV to grow wider than the browser window to accommodate it's children horizontally, rather than forcing them on new rows
i.e. consider the following code with fiddle. There are 6 child elements inside of a container element, all with a minimum width of 200px, and all set to float: left. When the window is resized wide enough they are all on one row. When it is narrowed, they start pushing to new rows. Ideally I would like them to remain on a single row and have the browser display a scroll bar.
http://jsfiddle.net/krippy2k/x8sDp/20/
.container {
}
.child-element {
min-width: 200px;
float: left;
height: 100px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<div class="container">
<div class="child-element child1"></div>
<div class="child-element child2"></div>
<div class="child-element child3"></div>
<div class="child-element child4"></div>
<div class="child-element child5"></div>
<div class="child-element child6"></div>
</div>
Either you can provide a width to the parent element, else you can use float: left; with display: inline-block; and white-space: nowrap;
.container {
white-space: nowrap;
}
.child-element {
min-width: 200px;
display: inline-block;
height: 100px;
}
Demo
For the white-space of 4px between each element, you can use margin-left: -4px;
Demo 2
Instead of floating the children, set them to inline block and set white-space:nowrap on the container.
.container {
white-space:nowrap;
}
.child-element {
display:inline-block;
min-width: 200px;
height: 100px;
}
http://jsfiddle.net/x8sDp/24/
Just set the .container to display:table and the .child-elements to be display:table-cell and remove float:left from .child-element:
.container {
display: table;
}
.child-element {
min-width: 200px;
display: table-cell;
height: 100px;
}
DEMO
Adding a huge width to the container works
.container {
width: 999999px;
}
Though im not sure why you would want to do something like this, from a usability/interface point of view.
Why in the following example the height of the inner div is not like wrapper's div ?
Live demo here.
HTML:
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
min-height: inherit;
I believe this is the output you want: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
Tested on chrome and firefox.
You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.
height = When used as a %, this is a percent of the window height
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height
http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
Anyway, happy coding ;)
I certainly joined answers and the result using 'min-height' for the -main HTML tag- (class = "main-page-container"):
HTML:
<div id="divMainContent">
<!-- before or after you can use multiples divs or containers HTML elements-->
<div> </div>
<div> </div>
<main class="main-page-container">
<div class="wrapper">
1
<div class="wrapper2">
2
<div class="child">3</div>
</div>
</div>
</main>
<!-- before or after you can use multiples divs or containers HTML elements-->
<div class="footer-page-container bg-danger" > more relevant info</div>
</div>
CSS:
/*#region ---- app component containers ---- */
#divMainContent {
height: 100%;
display: flex;
flex-direction: column;
/*optional: max width for screens with high resolution*/
max-width: 1280px;
margin:0 auto;
}
.main-page-container {
display: inline-table;
height: 70%;
min-height: 70%;
width: 100%;
}
.footer-page-container{
flex:1; /* important in order to cover the rest of height */
/* this is just for your internal html tags
display: flex;
flex-direction: column;
justify-content: space-between; */
}
/*#endregion ---- app component containers ---- */
.wrapper {
background: blue;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.wrapper2 {
width: 90%;
margin: auto;
background: pink;
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 90%;
}
.child {
min-height: 100px;
min-width: 300px;
background: orange;
position: relative;
width: 33%;
}