This question already has answers here:
Align first div to left with subsequent divs aligned right
(3 answers)
Closed 6 years ago.
How could it be possible use Flex css to leave the elements as follows?
You can use margin-left: auto on second element and that will push second and third element to right.
.content {
display: flex;
}
.content > div {
width: 50px;
height: 50px;
border: 1px solid black;
}
.content > div:nth-child(2) {
margin-left: auto;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
You could also achieve this with margin-right: auto on the first element. In this case the main horizontal align is flex-end and only the first div is flex-start. Because of that you can push the first div with margin-right: auto to the left and the others will keep the flex-end alignment. So every additional div will also be positioned to the right side.
#wrapper{
background: #eee;
display: flex;
justify-content: flex-end;
}
.box{
width: 100px;
height: 100px;
background: #000;
}
.box:nth-child(1){
background: rgba(0,255,0,0.3);
margin-right: auto;
}
.box:nth-child(2){
background: rgba(0,0,255,0.3);
}
.box:nth-child(3){
background: rgba(255,0,255,0.3);
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed last year.
.parent {
display: flex;
justify-content: flex-end;
background-color: lightgray;
}
.child {
width: 200px;
height: 200px;
background-color: gray;
border: solid black 1px;
}
.center {
margin: 0 auto;
background-color: black
}
<div class="parent">
<div class="child center"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
and this is what i've got.
It seems the black one is located in the a little left, not the "center" of the parent.
How can i fix this?
If you don't mind using grid instead of flexbox, you can utilize the property justify-self to align the black box to the center with the help of position: absolute;. The absolute positioning here makes it so it's possible to align the black box toward the center without minding/affecting the other two boxes. See the snippet below:
.parent {
display: grid;
justify-content: flex-end;
grid-auto-flow: column;
background-color: lightgray;
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: gray;
border: solid black 1px;
}
.center {
background-color: black;
justify-self: center;
position: absolute;
}
#media screen and (max-width: 992px) {
.parent{
display: flex;
flex-wrap: wrap;
}
.center {
position: relative;
}
}
<div class="parent">
<div class="child center"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
PS. I've added a #media query in case you want the 3 boxes to stack on a smaller space/screen.
Edit: Changed display on smaller screens and applied wrapping when necessary using flex-wrap.
More on justify-self and grid here and here respectively.
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I want to accomplish something like the image, but without the third element, having one element fixed on the left and another in the center.
Is there an easier way without flexbox?
<div style="display: flex; justify-content: space-between">
<button>Left Header</button>
<button>middle</button>
</div>
Im sure there is a better way, but how about just hiding last column?
.container {
display: flex;
justify-content: space-between;
}
.item {
/* no important; just to visualize*/
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}
.item.last { /* :last-child doesn't work */
visibility: hidden;
background-color: red;
}
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item last">C</div>
<div>
You can use postion for first div and margin for the second div, like this
.container {
postion: relative;
}
.item {
width: 50px;
height: 50px;
background-color: teal;
border: 1px solid grey;
}
.item.one {
position: absolute;
}
.item.two {
margin: auto
}
<div class="container">
<div class="item one">A</div>
<div class="item two">B</div>
<div>
you can follow this code
<div style="display: flex; justify-content: space-between">
<button>Left Header</button>
<button style="margin-right: auto; margin-left: auto">middle</button>
</div>
You can just use flexbox "self-align".
Just check it here.
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
I'm trying to move the element to the bottom of its parent but only way to do that is to make it positioned absolute but i want it to be relative.
#output{
height: 100px;
background-color: red;
}
#inner{
height: 30px;
background-color: blue;
/*float: down*/
}
<div id="output">
<div id="inner"></div>
</div>
#output{
height: 100px;
background-color: red;
display: flex;
flex-direction: column;
}
#inner{
margin-top: auto;
height: 30px;
background-color: blue;
/*float: down*/
}
<div id="output">
<div id="inner"></div>
</div>
So I'm struggling to achieve this simple concept with CSS and i've also searched the entire internet but couldn't find anything. I think I'm just not wording it correctly so a visual image of what i'm trying to do is this:
The top box should be positioned on top and the bottom one should be positioned at the bottom. Then the boxes in between them should have equal spacing on top and bottom. This is more like the vertical version of this answer: https://stackoverflow.com/a/6880421/7150896
You can use Flexbox for this. You just need to set flex-direction: column and justify-content: space-between.
body,
html {
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 250px;
border: 1px solid black;
justify-content: space-between;
flex-direction: column;
width: 200px;
}
.box {
background: #0479D9;
height: 50px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You can also achieve this using grid css layout:
.content {
display: grid;
align-content: space-between;
height: 275px;
border: 1px solid black;
width: 200px;
}
.box {
background: #0479D9;
height: 75px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
This question already has answers here:
Wrapper div won't expand with Content div
(2 answers)
Closed 1 year ago.
I have four divs on my page. outer_div contains the other three: header , left-container and right-container. I have no concern with header and left-container. Actually my right-container div contains a dynamic table.
The problem is that when size of table grows, right-container div does not grows automatically. I mean its size stay static.
html code:
<html>
<body>
<div id="outer_div" style="background-color:Gainsboro; position:relative; top:50px; left:50px;height:550px;border-radius:8px; border:groove; width:1240px">
<div id="header" style="background-color:Khaki ; position:relative; top:5px; left:5px;height:50px;border-radius:8px; border:groove; width:1225px">
<h1 style="left:550px; position:relative; top:-7px">Admin Panel</h1>
</div> <!-- header ends-->
<div id="lef-container" style="background-color:LightSteelBlue ; position:absolute; top:65px; left:4px;height:475px;border-radius:8px; border:groove; width:280px">
</div> <!--left-container ends -->
<div id="right-container" style="background-color:LightSteelBlue ; position:absolute; top:65px; left:294px;height:475px;border-radius:8px; border:groove; width:936px">
<!-- this div contains dynamica table -->
</div> <!--right-container ends -->
</div> <!--outer div ends -->
</body>
</html>
how to fix it ?
here is css :
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
css of table :
var tab=document.createElement('table');
tab.style.width='800';
You need to have a dynamic width and height attribute such as fit-content. The problem is that you are using a fixed width of 936px and also a fixed height of 475px so the div will never stretch to be larger than that. You can do this instead:
<div id="right-container" style="...">
</div>
Then in css:
.right-container {
min-width: 936px;
min-height: 475px;
width: fit-content;
height: fit-content;
}
When the elements inside of right-container grow, then right-container will stretch to fit them inside.
As the others have pointed out, you are using fixed widths and heights, so the elements aren't going to grow to fit the content.
But I would suggest that you're going about this in generally a wrong way.
Some larger principles to consider:
Avoid inline styling. Use CSS to style your elements instead.
Avoid fixed sizing. Using things like flexbox instead.
For example, here's how I would do what you're doing here:
$("button").click(() => {
console.log("foo");
$(".right").append("<table/>");
});
.main {
display: flex;
flex-flow: column nowrap;
/* I'm doing fixed size here, as we need an initial container size*/
height: 100px;
width: 500px;
}
header {
/**
A specific height on header seems ok.
*/
flex: 0 0 4em;
background-color: #ddf;
}
.content {
/* Content fills the rest of the container*/
flex: 1 0 auto;
display: flex;
flex-flow: row nowrap;
}
.left {
/*Have a fixed width on the left. Maybe a percentage would be better*/
flex: 0 0 10em;
background-color: #fdd;
}
.right {
/* Right fills the remainder*/
flex: 1 0 auto;
background-color: #dfd;
}
table {
/*Fixed size for demonstration.*/
border: solid 1px black;
width: 150px;
height: 150px;
}
button {
margin: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> click me to add content</button>
<div class="main">
<header> admin panel </header>
<div class="content">
<section class="left"> left </section>
<section class="right"> right </section>
</div>
</div>
You have 3 options here:
You can use floats and clearfix.
You can use display:flex
You can use display :grid and then use flex
If you are targeting modern browsers only then option 2 and 3 will work great.
Please find below the HTML and CSS for the same - I hope it resolves your issue:
HTML
<!--outer div ends -->
<div id="outer_div" class="outer_div1">
<div id="header" class="header1">
<h1>Admin Panel</h1>
</div>
<div class="sec">
<!-- header ends-->
<div id="lef-container" class="left1">Left
</div>
<!--left-container ends -->
<div id="right-container" class="right1">Right
<!-- this div contains dynamica table -->
</div>
<!--right-container ends -->
</div>
</div>
CSS
.outer_div1 {
background-color: Gainsboro;
display: flex;
flex-direction: column;
margin: 0px auto;
max-width: 1240px;
}
.sec{
display: flex;
flex-direction: row;
}
.header1 {
background-color: Khaki;
text-align: center;
}
.header1>h1 {
}
.left1 {
background-color: LightSteelBlue;
width:calc(30% - 1.5rem);
margin: 1rem 1.5rem 1rem 1rem;
min-height: 50vh;
border-radius: .5rem;
padding:1rem;
}
.right1 {
background-color: LightSteelBlue;
width:calc(70% - 1.5rem);
min-height: 50vh;
margin: 1rem 1.5rem 1rem 1rem;
border-radius: .5rem;
padding:1rem;
}
<div style="display:inline-block;"></div>
This will increase div size according to contents in it.