This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have 2 different height divs side by side:
.box {
color: white;
display: inline-block;
}
#box-a {
background-color: black;
height: 90px;
width: 100px;
}
#box-b {
background-color: blue;
height: 50px;
width: 100px;
}
<div class="box" id="box-a">
<p> div a </p>
</div>
<div class="box" id="box-b">
<p> div b </p>
</div>
Now I want something like this
and no matter how hard I have tried and researched I can't get it to work.
My suggestion:
.box {
color: white;
margin-right: 10px;
}
#box-a {
background-color: black;
height: 90px;
width: 100px;
}
#box-b {
background-color: blue;
height: 50px;
width: 100px;
}
.wrapper {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="box" id="box-a">
<p> div a </p>
</div>
<div class="box" id="box-b">
<p> div b </p>
</div>
</div>
If you also want to center boxes horizontally, just add justify-content: center to css wrapper rule set.
Try adding this in your css
#box-b {
position:relative;
top:20px;
}
.box {
color: white;
display: inline-block;
}
#box-a {
background-color: black;
height: 90px;
width: 100px;
}
#box-b {
background-color: blue;
height: 50px;
width: 100px;
}
#box-b {
position: relative;
top: 20px;
}
<div class="box" id="box-a">
<p> div a </p>
</div>
<div class="box" id="box-b">
<p> div b </p>
</div>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I've got a div, I need the bottom div to fill the remainder of the screen and show a scroll bar. The bottom div is not showing a scroll bar.
JSFiddle
.page {
position: fixed;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: $menu-height 0 0 0;
box-sizing: border-box;
}
.sidebar {
width: 500px;
float: left;
height: 100%;
box-sizing: border-box;
background: #ddd;
border-right: 1px solid red;
}
.top {
height: 200px;
background: #eee;
}
.bottom {
background: #ccc;
overflow-y: auto;
}
.filler-content {
height: 2000px;
}
<div class="page">
<div class="sidebar">
<div class="top">
top
</div>
<div class="bottom">
<div class="filler-content">
bottom
</div>
</div>
</div>
</div>
If I understood your problem correctly, display: flex is your friend.
Add display: flex; flex-direction: column; to your .sidebar and flex: 1; to your .bottom and that should do it. If I misunderstood, just let me know in a comment and I'll try to help otherwise
Demo: http://jsfiddle.net/qy5fL29t/23/
I would use a flexbox solution as it will make it a lot simpler and get rid of the need for using floats (we shouldn't be abusing them in the day of css3)
html,
body {
height: 100%;
margin: 0;
}
.page {
height: 100%;
display: flex; /* this one is so that you don't need to float the sidebar and can insert a main area that will take up the rest of the width */
flex-direction: column;
flex-wrap: wrap;
}
.sidebar {
width: 500px;
height: 100%;
display: flex; /* this is so we can get bottom to take any height top doesn't need */
flex-direction: column;
background: #ddd;
border-right: 1px solid red;
}
.top {
flex-basis:200px;
min-height: 200px; /* these two are to force top to be 200px otherwise flex may recalculate based on available space */
max-height: 200px;
background: #eee;
}
.bottom {
flex-grow: 1; /* this forces bottom to grow to fill the space top doesn't take */
overflow-y: auto;
}
/* test and example below */
.filler-content {
height:1000px;
}
.main {
flex-grow: 1;
background: white;
}
<div class="page">
<div class="sidebar">
<div class="top">
top
</div>
<div class="bottom">
<div class="filler-content">
bottom
</div>
</div>
</div>
<div class="main">
</div>
</div>
Replace your css with this
.sidebar {
width: 500px;
float: left;
height: 100%;
box-sizing: border-box;
background: #ddd;
border-right: 1px solid red;
}
.top {
height: 200px;
background: #eee;
}
.bottom {
background: #ccc;
overflow-y: scroll;
height:200px
}
.filler-content {
height:2000px;
}
<html>
<body>
<div class="page">
<div class="sidebar">
<div class="top">
top
</div>
<div class="bottom">
<div class="filler-content">
bottom
</div>
</div>
</div>
</body>
</div>
</html>
You can use this code for bottom div srollbar.
.bottom {
background: #ccc;
overflow-y: auto;
height:200px;
}
This question already has answers here:
Vertically center two elements within a div [duplicate]
(2 answers)
Closed 5 years ago.
How can I center these four buttons inside their own div vertically and horizontally?
Update: No Flexbox please. I do not have that luxury.
#outer {
width: 400px;
height: 200px;
background-color: black;
display: table-cell;
}
#innerOne {
width: 400px;
height: 100px;
background-color: red;
vertical-align: middle;
}
#innerOne {
width: 400px;
height: 100px;
background-color: blue;
vertical-align: middle;
}
<div id="outer">
<div id="innerOne">
<button>One</button>
<button>Two</button>
</div>
<div id="innerTwo">
<button>Three</button>
<button>Four</button>
</div>
</div>
I want "one", "two" to be centered inside the blue div vertically and horizontally. The same for "three" and "four" in the black div.
I have tried many different options by setting their display to table and table-cell without the desired effect I want.
Since the buttons are inline blocks you can center them vertically using a pseudo-element. The pseudo element has the height of the container (.inner), and is vertically aligned, and all inline blocks with less height, will be centered to it.
To center them horizontally set text-align: center on the container (.inner).
#outer {
width: 400px;
height: 200px;
background-color: black;
}
.inner {
width: 400px;
height: 100px;
text-align: center;
}
.inner::before {
display: inline-block;
height: 100%;
content: '';
vertical-align: middle;
}
#innerOne {
background-color: red;
}
#innerTwo {
background-color: blue;
}
<div id="outer">
<div id="innerOne" class="inner">
<button>One</button>
<button>Two</button>
</div>
<div id="innerTwo" class="inner">
<button>Three</button>
<button>Four</button>
</div>
</div>
for a single line, you could use a line-height equal to the box's height to vertical align at the center the inline content.
and text-align for the horizontal part
#outer {
width: 400px;
height: 200px;
background-color: black;
/*display: table-cell;useless here i believe*/
text-align:center;
}
#innerOne,
#innerTwo {
width: 400px;
height: 100px;
line-height:100px;
background-color: blue;
}
#innerOne {
background-color: red;
}
<div id="outer">
<div id="innerOne">
<button>One</button>
<button>Two</button>
</div>
<div id="innerTwo">
<button>Three</button>
<button>Four</button>
</div>
</div>
I am currently trying to figure out a way to be able to have a layout that has a bottom-up, content-oriented resizing behavior.
I have the following situation: https://codepen.io/Flash1232/pen/JJYPVQ
What is wrong here is obviously that the wrapper divs do not wrap around the table divs. Now is there any solution for this involving just plain CSS and HTML or do I have to write something in JS like "set wrapper width to the width of its inner div"?
Thanks in advance for any clues!
Man i solved my problem with display:flex on parent element :)
You may want to consider using a flexbox. Please see below. If there is anything that needs to be different, just let me know.
.outer-div {
position: absolute;
background: black;
width: 800px;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
padding: 10px;
}
.area {
overflow: auto;
display: flex;
border: 5px solid red;
background: white;
margin: 10px 40px 10px 10px;
}
.column {
background: green;
border: 5px solid blue;
}
.wrapper {
display: flex;
border: 5px solid yellow;
justify-content: center;
align-items: center;
}
.table {
white-space: nowrap;
}
.violet {
background: violet;
width: 120%;
height: 80px;
}
.red {
background: red;
width: 150%;
height: 80px;
margin-bottom: 20px;
}
.icons {
Background: yellow;
float: right;
height: auto;
width: auto;
}
<div class="outer-div">
<div class="area">
<div class="column">
<div class="wrapper">
<div class="table red">
<span>***Table Content***</span>
</div>
</div>
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
<div class="column">
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
</div>
<div class="icons">
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
</div>
</div>
You should read the definition of the width attribute.
https://developer.mozilla.org/en/docs/Web/CSS/width
Percentages: refer to the width of the containing block
If you set width to 150%, you explicitly say, that the child should be bigger than the parent. You can not expect, that the parent has the same width like the child, if you force the child to be wider.
I've been trying to achieve the following:
Note: The dashed line is just a guide showing that .inner-a and .inner-b are both horizontally and vertically middle aligned to an imaginary split of .outer down the middle.
Is this possible using just CSS? Or would it need some javascript to achieve?
Here is what I have till now:
HTML
<div class="outer">
<div class="inner-a"></div>
<div class="inner-b"></div>
</div>
CSS
.outer {
width: 300px;
height: 300px;
}
.inner-a, inner-b {
width: 100px;
height: 100px;
}
.inner-a {
float:left;
}
.inner-b {
float: right;
}
.outer { display: inline-flex; align-items: center; }
Try This:
.outer {
width: 500px;
height: 300px;
text-align:center;
border:2px solid red
}
.inner-a, .inner-b {
width: 100px;
height: 100px;
display:inline-block;
border: 2px solid #000;
margin: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
border:2px solid #000;
margin:10px;
}
<div class="outer">
<div class="inner-a"></div>
<div class="inner-b"></div>
</div>
Since you're using Bootstrap 4 you can use the flexbox utils and avoid the extra CSS..
<div class="outer d-inline-flex justify-content-center align-items-center">
<div class="inner-a">a</div>
<div class="inner-b">b</div>
</div>
https://www.codeply.com/go/fA7OzCOQVp
I have a vertically central adaptable scrollable flexbox element, which itself should have two columns (I solved this with two child-divs). The central flexbox should have a frame and a central divider line.
I can't get the central divider line to run all the way to the bottom of the scrollable flexbox. I tried it with a third child div element but the line only appears for the vertical extent of the flexbox.
How can I make two columns in a scrollable flexbox with a frame and central divider line running all the way to the bottom?
Thank you for your help.
Here is the example:
https://jsfiddle.net/soliman/0d0tn22x/2/
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent"> Column 1
With a lot of lines.
</div>
<div class="divider"></div>
<div class="rightContent"> Column 2
With fewer lines
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: black;
color: red;
}
.wrapper {
display: flex;
/* use the flex model */
height: 100%;
flex-direction: column;
}
.header {
margin: 1em 1em 0 1em;
}
.content {
flex: 1 1 auto;
display: flex;
overflow-y: auto;
position: relative;
min-height: 100px;
margin: 0 1em 0 1em;
border: 6px double red;
}
.content > div {
width: 50%;
padding: 3%;
}
.content > div:first-child {
margin-right: 10px;
}
.footer {
margin: 0 1em 1em 1em;
}
.divider {
position: absolute;
left: 50%;
top: 0%;
bottom: 0%;
border-left: 6px double red;
}
Try this mixed flexbox and CSS table layout. You can set the content area as a table, and the three columns as table cells, so they always be equal height.
There is one issue with the approach is - it only works properly if the content is taller than the container, otherwise the vertical line will stop in the middle. See the other approach at the bottom.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
}
.wrapContent {
display: table;
width: 100%;
}
.wrapContent > div {
display: table-cell;
}
.leftContent,
.rightContent {
width: 50%;
}
.divider {
border-left: 1px solid;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="wrapContent">
<div class="leftContent">
<div style="height:500px;">Left</div>
</div>
<div class="divider"></div>
<div class="rightContent">
<div style="height:auto;">Right</div>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
Another way would be using background image for the vertical line, set that to the center of the content container, with repeat-y, the image can be just a square dot. It works well even if the content is shorter than the container.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y;
background-size: 1px;
}
.leftContent,
.rightContent {
width: 50%;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent">
<div style="height:500px;">left</div>
</div>
<div class="rightContent">
<div style="height:auto;">right</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>