This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I'm trying to center div's inside one outter div, but I can't.
My html is something like this :
<div class="outterDiv">
<div class="innerDivBig">
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="clear:both"/>
</div>
</div>
And my css is something like this :
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align: center;
}
.innerDivBig{
margin: 0 auto;
display:table;
}
Here is jsfiddle.
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align:center;
}
.innerDivBig{
display: inline-block;
}
https://jsfiddle.net/2a8514nf/7/
UPDATE:
https://jsfiddle.net/2a8514nf/4/
I use display: table because the browser calculates the width to fit all the child elements width display: table-cell so that you wont have to worry about the width.
I also use padding instead of margin since it does not expand the element so the parent size remains the same.
.outer {
width: 500px;
border: 1px solid #000;
padding: 15px;
margin: 0 auto;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
}
.inner > div {
display: table-cell;
padding: 0 5px;
text-align: center;
}
.inner > div > div {
padding: 15px;
text-align: center;
border: 1px solid #00F;
}
<div class="outer">
<div class="inner">
<div>
<div>Inner Div 1</div>
</div>
<div>
<div>Inner Div 2</div>
</div>
<div>
<div>Inner Div 3</div>
</div>
</div>
</div>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 2 years ago.
Is this possible with just css? There are two siblings elements. The 2nd element has height that is only big enough to fit its children (children may change over time). The 1st element should have the same height as the 2nd element. If its content is larger than its height then it should overflow with scroll.
The snippet below does not match this because the 1st element takes up as much height as it needs to fully display its contents.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
border-style: solid;
border-width: 1px;
border-color: #000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: fit-content;
}
#first {
background-color: #00F;
overflow-y: scroll;
height: 100%;
}
#second {
background-color: #0F0;
height: fit-content;
width: 200px;
}
#block {
height: 40px;
width: 40px;
margin: 5px;
background-color: #F00;
}
<div id="container">
<div id="first">
<div id="block">
</div>
<div id="block">
</div>
<div id="block">
</div>
</div>
<div id="second">
<div id="block">
</div>
<div id="block">
</div>
</div>
</div>
You should wrap the #first with extra wrapper and apply the background color to it. And use height:0 min-height:100% trick on the #first
I also fixed your html mistake. An ID can only be used once per page. So I changed the #block as .block
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
border-style: solid;
border-width: 1px;
border-color: #000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: fit-content;
}
.scroll-area {
overflow-y:auto;
background-color: #00F;
}
#first {
min-height: 100%;
height: 0;
}
#second {
background-color: #0F0;
/* height: fit-content; // unnecessary */
width: 200px;
}
.block {
height: 40px;
width: 40px;
margin: 5px;
background-color: #F00;
}
<div id="container">
<div class="scroll-area">
<div id="first">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
</div>
<div id="second">
<div class="block">
</div>
<div class="block">
</div>
</div>
</div>
This question already has answers here:
How to place div side by side
(7 answers)
Closed 4 years ago.
I have two boxes my one box are in the left side and my other box is in the bottom how can I make these two boxes in the same row
I tried to float right
.box2{
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
my html
<div class="box2">
</div>
<div class="box2">
</div>
.flex-parent {
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: red;
margin: 20px;
padding: 20px;
}
<div class="flex-parent">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
You could try some flex-box https://codepen.io/krullmizter/pen/xMXWrv with that you add a parent container around the boxes and flex them with it.
Use display:inline; in style for both the div
.box1 {
width: 1005px;
height: 1000px;
padding: 50px;
border: 1px solid red;
margin-left: 162px;
background-color: blue;
}
.box2{
width: 280px;
height: 250px;
padding: 10px;
background-color: red;
}
.box1, .box2
{
display:inline;
text-align:center;
}
<div class="box1">
</div>
<div class="box2">
</div>
This question already has answers here:
Make background color extend into overflow area
(4 answers)
Closed 4 years ago.
I'm trying to create a table like structure that is scrollable horizontally. To do that I have a wrapper div that has overflow-x: auto, a div for each row and a div for each cell.
I want to apply a style to the row but the style is only applied to those elements that are visible.
.inner {
flex: 1 0 10em;
height: 2em;
background-color: green;
}
.outer {
border-bottom: 10px solid red;
display: flex;
}
.box {
width: 20em;
overflow-x: scroll;
}
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
I want all of the green boxes to have a red bottom border, but the border only appears on those items that are not overflowing. What am I missing?
You may try this instead:
.inner {
flex: 1 0 10em;
width:10em; /*Specify a width */
height: 2em;
background-color: green;
}
.outer {
border-bottom: 10px solid red;
display: inline-flex; /* to take the width of content and not container*/
}
.box {
width: 20em;
overflow-x: scroll;
}
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
I dont know exactly what you mean, but I hope this helps:
Since the CSS you use only for the outer,It does just that and put it only for the part that is visible. To achieve bottom red border for all of them, you have to put the border on the inner part.
HTML:
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
CSS:
.inner {
flex: 1 0 10em;
height: 2em;
background-color: green;
border-bottom: 10px solid red;
}
.outer {
width: 20em;
display: flex;
}
.box {
width: 20em;
overflow-x: scroll;
}
Hope it helps :)
I have an outer DIV (4) and three inner DIVs (1-3). I don't care about width here. It's all about height and vertical centering. I want the outer DIV (4) to get the height of the highest inner DIV (2 in row A). More importantly I want the other inner DIVs (1 and 3 in row A) to get centered vertically (in relation to the height of the outer DIV that has the same height as the highest inner DIV).
The contents of the DIVs are dynamic (compare row A and B) therefore I don't know which inner DIV will be the highest. Until now I used a jQuery solution that set the margin-top of the smaller DIVs (red marks) but I would like to solve it in plain CSS now.
This is easy using a flexbox - the property align-items: center produces the desired result - see a demo below:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.wrapper > div {
border: 1px solid;
}
<div class="wrapper">
<div class="one">Some text here</div>
<div class="two">
There is a lot of text here
<br>There is a lot of text here
<br>There is a lot of text here
<br>
</div>
<div class="three">Some
<br>text</div>
</div>
.outera {
border:solid 1px #333;
}
.outera div {
width:20px;
border-radius: 16px;
background-color:#212121;
margin:10px;
display:inline-block;
vertical-align: middle;
}
.outera .a1 {
height:20px;
}
.outera .a2 {
height:80px;
}
.outera .a3 {
height:50px;
}
<div class='outera'>
<div class='a1'></div>
<div class='a2'></div>
<div class='a3'></div>
</div>
You can use CSS Flexbox.
In the below snippet I've used display: inline-flex;. Have a look at the snippet below:
body {
padding: 20px;
}
.outer {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.inner {}
.a .element {
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
}
.b .element {
width: 20px;
height: 50px;
border-radius: 50%;
background: green;
}
.c .element {
width: 20px;
height: 30px;
border-radius: 50%;
background: blue;
}
<div class="outer">
<div class="inner a">
<div class="element"></div>
</div>
<div class="inner b">
<div class="element"></div>
</div>
<div class="inner c">
<div class="element"></div>
</div>
</div>
Hope this helps!
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.