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>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 7 months ago.
div.c {
width: 25px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
<body>
<div class="header" ,style="display: inline">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<h1>GeekForGeek</h1>
Here I want GeekForGeek to be in the center in the position which is marked yellow here
But it is getting displayed as shown in fig.
For example using a three columns layout (via display flex) on your header.
I made a demo to show the concept:
div.c {
/*width: 60px;*/
width: 60px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
}
.header > div {
/*border just for educational purpose.. remove it*/
border: dashed 3px gray;
flex: 33.33%;
}
.header h1{
text-align: center;
}
/*-----------------------*/
.contents{
border: dashed 3px gray;
margin-top: 1rem;
font-size: 1.5rem;
padding: 1rem;
}
.contents ol li{
margin-bottom: 1rem;
}
<div class="header">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<div>
<h1>GeekForGeek</h1>
</div>
<div>
</div>
</div>
<div class="contents">
<ol>
<li>I took the freedom to change the width of your hamburger menu selector, because it's common practice to have it more square shaped.. yours was very narrow in size;</li>
<li>The 3 columns layout grants you that the block in the middle will be perfectly centered related to the full width of the viewport;</li>
<li>The side effect is having to include the third column despite being empty;</li>
<li>The borders on header's blocks should be removed in the corresponding css rule and were added just to better show off the layout;</li>
</ol>
</div>
use flex and margin auto for h1
div.c {
width: 25px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
.header {
display: flex;
}
h1 {
margin-left: auto;
margin-right: auto;
}
<body>
<div class="header" ,style="display: inline">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<h1>GeekForGeek</h1>
</div>
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:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
Here https://jsfiddle.net/w39znn58/ I did a hard sketch with floats and absolute positioning of what I'm trying to achieve with clean and modern CSS using flex-box most likely? Or grid?
div {
border: 1px solid black;
padding: 20px;
width: 80px;
}
.rectangle {
height: 82px;
float: left;
}
.square {
float: left;
}
.square-2 {
float: none;
position: absolute;
top: 70px;
left: 130px;
}
<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>
I want two blocks, one to stack on top of the other next to a vertical rectangle without fixed/absolute positioning and without adding a div wrapper for .square divs.
You can do it with the Grid:
.grid {
display: grid;
grid-template-columns: 1fr 1fr; /* creates two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */
}
.grid > div {
padding: 20px;
border: 1px solid;
}
.rectangle {
grid-row: 1/3; /* spans two rows */
}
<div class="grid">
<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>
</div>
Here is a simple flex solution for this:
* {
box-sizing:border-box;
}
body {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* change the dimension as needed*/
height: 50vh;
width:50vw;
/**/
}
div {
border: 1px solid black;
width: 50%;
text-align:center;
}
.rectangle {
height: 100%;
}
.square {
height: 50%;
}
<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>
CSS changes:
div {
border: 1px solid black;
padding: 20px;
width: 80px;
display: grid;
}
.rectangle {
height: 82px;
float: left;
}
.square{
height: 20px;
}
<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>
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!
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>