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>
Related
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I'd like to create a responsive page with a fixed html structure so I can just adjust the css. I would like to create rows with vertically and horizontally centered texts. The divs should fully stretch across the parent div.
My HTML...
<body>
<div class="parent">
<div class="d1">
one
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
</body>
My CSS...
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
background-color: lightblue;
height: 100%;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
However here I am setting d1, d2 and d3 to the height of 100px and not 100% of the parent div. Example here: https://jsfiddle.net/bLf2sxq0/
My second idea was to use display: table for the parent which results in table-rows for the childs but then I end up with the same stretching issue plus the texts are not vertically centered. Here the css would be like this ...
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
display: table;
background-color: lightblue;
}
.d1, .d2, .d3 {
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
Example here: https://jsfiddle.net/qmbzkwr2/
Is there a way to stretch the divs vertically along the parent and keep the texts centered vertically and horizontally within the divs? So I would not have width 100px but something like calc(100%/3) or any other solution to do this? Or maybe by using the flex grow option? Easiest way would do it :)
Thanks for any help!
You're on the right track. Use flexbox to stretch and fill items vertically and evenly. Remember to set parent containers (e.g. body, html) to height: 100%.
From here, if you want control over some items, use flex on any individual item, like flex: 1 1 300px on class .d2 for example.
Codepen
body, html {
height: 100%;
}
.parent {
background-color: lightblue;
height: 100%;
display: flex;
flex-direction: column;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.d2 {
background-color: lightgreen;
}
<div class="parent">
<div class="d1">
<div class="d11">
one
</div>
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
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>
I am building on the question originally asked here How to center horizontal table-cell with a slight modification.
Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle.
Changing vertical-align: middle; for .column does NOTHING. If I change display: inline-block; for .column to display: table-cell, it will align content in the middle, but then .column DIVs are no longer centered and widths are all broken (currently all a evenly set to 25%). Setting margin:auto; or text-align on parent does nothing.
I've been running around this for days. Your help is appreciated.
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
min-height: 1px;
}
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
width:100%;
text-align: center;
}
/* Creating columns */
.column {
display: inline-block;
vertical-align: middle;
min-height: 150px;
width: 25%;
text-align: left;
}
#a {
background-color: pink;
}
#b {
background-color: lightgreen;
}
#c {
background-color: lightblue;
}
<div id="container">
<div class="section">
<div class="columns-container">
<div class="column" id="a"> Contents A </div>
<div class="column" id="b"> Contents B </div>
<div class="column" id="c"> Contents C </div>
</div>
</div>
</div>
You could do it like the follows, it uses CSS3 Transforms, see the browser support details. And be aware of the white spaces thing on inline block.
JsFiddle demo
.container {
text-align: center;
margin: 0 auto;
}
.column {
display: inline-block;
width: 150px;
height: 150px;
}
.column > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
<div class="container">
<div class="column" id="a"><div>Contents A</div></div>
<div class="column" id="b"><div>Contents B</div></div>
<div class="column" id="c"><div>Contents C</div></div>
</div>
setting your .column's line-height to the height of the element is step one; so: line-height:150px vertically aligns the content.
Then, simply edit the text-align:left style declaration you have set on .column to text-align:center finishes the vertically alignment in this case.
here's a fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/