I have some structure like this:
.divParent{
height: 100px;
}
.div1 {
height: 40px;
background: blue;
}
.div2{
height: 150px;
background: yellow
}
<div class="divParent">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
<div class="divNew">
<span>Hello</span>
</div>
I want divNew to go to next line and not get overlapped by content of divParent. I tried so many things but nothing is working out.
I know, I can use <br /> tag to do this but I don't want to use that. Is there any other solution.
Use flex
.divParent{
clear:both;
height: 100px;
}
.div1 {
height: 40px;
background: blue;
}
.div2{
height: 150px;
background: yellow
}
.divParent, .divNew {
display: flex;
flex: 1;
flex-direction: column;
}
.divNew {
background:red;
}
<div class="divParent">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
<div class="divNew">
<span>Hello</span>
</div>
You don't need to remove the height, your second div is actually causing an issue. It's bigger than parent. So either increase the parent or decrease div2.
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I devide the div into two parts, and achieve with Flex Box in each part.
<!--My Trials-->
<body>
<div>
<div class="container1" style="display: flex;">
<div class="item1" style="flex:1;background-color: yellowgreen;">1</div>
<div class="item1" style="flex:1;background-color: lightseagreen;">2</div>
<div class="item1" style="flex:1;background-color: palevioletred">3</div>
</div>
<div class="container2" style="display: flex;">
<div class="item2" style="flex:1;background-color: lightskyblue;">4</div>
<div class="item2" style="flex:2;visibility: hidden;">5</div><!-- hide the 5th div -->
</div>
</div>
</body>
I wonder how to turn each div into a square.
And Is there anyway can achive the layout without the help of the 5th div?
.container {
display: flex;
flex-wrap: wrap;
}
.item1 {
height: 100px;
width: 33%;
background-color: lightblue;
color: black;
}
.item2 {
height: 100px;
width: 33%;
background-color: lawngreen;
color: black;
}
.item3 {
height: 100px;
width: 33%;
background-color: pink;
color: black;
}
.item4 {
height: 100px;
width: 33%;
background-color: orange;
color: black;
}
<body>
<div class="container">
<div class="item1">This is square 1</div>
<div class="item2">This is square 2</div>
<div class="item3">This is square 3</div>
<div class="item4">This is square 4</div>
</div>
</body>
The flex-wrap property allows elements to move to the next row when there is no more space on the current row. Making it completely responsive. And the width property is set to take up 33% of the view port window at all times.
Let me know if that works or if you need help with anything.
I'm stacked with CSS, trying to give to an absolute positioned <div> the remaining height from where it starts.. Let me explain better with this snippet:
#main {
background-color: yellow;
}
#container {
display: grid;
position: relative;
grid-template-rows: auto auto;
}
#child_1 {
background-color: red;
grid-row: 1 / 2;
height: 100px; // this can vary
}
#child_2 {
background-color: green;
grid-row: 2 / 3;
height: 77px; // this can vary
}
#child_3 {
width: 100%;
position: absolute;
top: 100%;
background: lightblue;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
<div id="something-else">
Something that is <br />
behind <br />
the absoolute <br />
div <br />
</div>
</div>
As you can see, div#child_3 starts right after div#child_2 (this is a constraint, I do want this), and I also want it to be position: absolute because it must cover anything else that may be on the screen (basically, I will have a JS handler that show/hide div#child_3, and when it is shown, it should cover #something-else).
What I would like to achieve is that div#child_3 takes all the height, from where it starts, to the end of the viewport.. To make it clearer, look at this image:
The difficult part is that.. I would like to achieve this only with CSS!
Because the only solution I've found so far is to set a fixed height to div#child_3, by granting him (100vh - div#child_3.getBoundingBoundRect().Top), and setting a ResizeObserver to cover the case in case in which the window got resized.
By the way, notice I cannot set a fixed height: calc(100vh - 177px) because, as written in CSS code, the div#child_1 and div#child_2 heights may vary.
Moreover, the div#main should not be touched: I can only work on div#container and its children, because they are part of a separate component (this example is simplified).
If there is no reason for any of the children to have their position set to absolute then this layout could be achieved with flexbox. Please see the snippet below for an example:
.parent {
height: 100vh;
/* Important styles below */
display: flex;
flex-flow: column wrap;
}
.child {
background: blue;
}
.child:nth-of-type(even) {
background: red;
}
.child--large {
/* Important styles below */
flex: 1;
}
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
<div class="child child--large">
4
</div>
</div>
Use CSS flex-box. It's much more flexible and responsive than grid.
#main {
background-color: yellow;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
#child_1 {
background-color: red;
flex-grow: 1;
}
#child_2 {
background-color: green;
flex-grow: 1;
}
#child_3 {
background-color: lightBlue;
flex-grow: 2;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
<div id="something-else">
More<br>elements<br>down<br>here...
</div>
</div>
Edited: It seems the original answer I deliver below is not what you want. The another idea I come up with when try on my own local machine (instead of Stackoverflow's the snippet editor) is to wrap the #child_3 inside another div called #child_3_wrapper and then position #child_3 relative to #child_3_wrapper instead of #container.
Here is the full code:
#main {
background-color: yellow;
}
#container {
display: grid;
height: 100vh; /*added this, try 100%, 98vh(or *padding:0;margin:0,...etc) to get the result desired*/
grid-template-rows: auto auto 1fr; /*added 1fr*/
}
#child_1 {
background-color: red;
grid-row: 1 / 2;
height: 100px;
}
#child_2 {
background-color: green;
grid-row: 2 / 3;
height: 77px;
}
/* changed the code below */
#child_3_wrapper {
position: relative;
}
#child_3 {
position: absolute;
top: 0; /* change top to 0 - relative to the wrapper, not the grid any more*/
width: 100%;
height: 100%;
background: lightblue;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3_wrapper">
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
</div>
<div id="something-else">
Something that is <br />
behind <br />
the absoolute <br />
div <br />
</div>
</div>
The old answer
Is this what you want? I tried tweaking around with it to get the result.
Added height: 100%; to #container and #child_3
#main {
background-color: yellow;
}
#container {
display: grid;
height: 100%; /* add this */
position: relative;
grid-template-rows: auto auto;
}
#child_1 {
background-color: red;
grid-row: 1 / 2;
height: 100px; // this can vary
}
#child_2 {
background-color: green;
grid-row: 2 / 3;
height: 77px; // this can vary
}
#child_3 {
width: 100%;
position: absolute;
top: 100%;
height: 100%; /* add this */
background: lightblue;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
<div id="something-else">
Something that is <br />
behind <br />
the absoolute <br />
div <br />
</div>
</div>
Picture describes it better, so I am attaching it.
So, this is simple list. Green areas are clickable and what I want to achieve is centering texts inside those green buttons, but those texts also should be aligned to left side. Not sure if I am being clear enough, but I do hope picture will explain the idea.
Tried to play with flex, but not successfully.
#container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
border: 1px solid red;
}
<div id="container">
<div id="otherContainer">
<div class="item">some text</div>
<div class="item">sone loooonger text</div>
<div class="item">text</div>
</div>
</div>
I expect to have some clean css which would allow me to have desired result as you can see in picture. So, question is, is it even possible to achieve without hackish css/JS solutions?
Yes, its possible to do this without javascript, but it comes with some limitations like having to set a max-width.
button {
display: block;
width: 100%;
border: none;
}
div {
margin: 1rem auto;
max-width: 100px;
text-align: left;
}
.bg-green {
background: green;
}
.bg-lightgreen {
background: lightgreen;
}
<button class="bg-green">
<div>Some text</div>
</button>
<button class="bg-lightgreen">
<div>Some other text</div>
</button>
<button class="bg-green">
<div>Text</div>
</button>
Here is a trick using table:
#container {
display: table;
width:100%;
}
.item {
background: yellow;
display:table-row;
white-space:nowrap;
}
.item:before,
.item:after{
content: "";
display:table-cell;
width:50%;
}
.item:hover {
background: red;
}
<div id="container">
<div class="item">some text</div>
<div class="item">sone loooonger text</div>
<div class="item">text</div>
</div>
I have 3 columns
.bookingTotals.middleRow {
height: 315px;
bottom: 400px;
}
.bookingTotals.row {
height: 400px;
bottom: 0;
margin-left: 920px;
/*margin-right: 55px;*/
}
<div id "myParent">
<div style="float: left; width: 400px;">
//some stuff
<div>
<div style="float: left; width: 400px;">
//some stuff
<div>
<div style="float: left; width: 400px;">
<div style="height:50px;">
//top stuff
</div>
<div class="bookingTotals middleRow">
//middle stiff that fills the gap
</div>
<div class="bookingTotals row">
//bottom stuff that i want fixed to the bottom
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to split the last column into 3 layers where the top and bottom div heights are known. So I want the middle div to fill the space between.
What actually happens is that this footer div is displayed outside myParent as if it had no relation to it. What am I doing wrong?
I took some liberty with your height so it would show better.
Use CSS for everything, not put in the markup. Use classes for that.
I make the assumption you want the text in the last one at the bottom so I added a span around it and used align-self: flex-end; at the flex end for the row.
Background color added for clarity of the solution.
#myParent {
width: 100px;
}
.rowthing {
width: 410px;
}
.holder {
display: flex;
flex-direction: column;
min-height: 350px;
border: solid 1px red;
}
.things {
display: flex;
}
.topstuff {
height: 50px;
background-color: #ddeeee;
}
.bookingTotals.middleRow {
flex-grow: 1;
background-color: #dddddd;
justify-content: space-evenly;
}
.bookingTotals.middleRow span {
align-self: center;
}
.bookingTotals.bottom {
height: 100px;
background-color: #eeeedd;
justify-content: center;
}
.bookingTotals.bottom span {
align-self: flex-end;
}
<div id "myParent">
<div class="rowthing">
//some stuff1
</div>
<div class="rowthing">
//some stuff2
</div>
<div class="rowthing holder">
<div class="things topstuff">
//top stuff
</div>
<div class="things bookingTotals middleRow">
<span> //middle stiff that fills the gap<span>
</div>
<div class="things bookingTotals bottom">
<span>bottom stuff that i want fixed to the bottom<span>
</div>
</div>
</div>
If you use the bottom property you also need to specify position.
I used calc to fill the space. In this way, the height of the middle row will depend on the screen size.
.top-row {
height: 50px;
background: red;
}
.bookingTotals.middleRow {
height: calc(100vh - 400px);
background: orange;
}
.bookingTotals.row {
height: 290px;
background: yellow;
}
<div id="myParent">
<div>
some stuff
<div>
<div style="width: 400px;">
some stuff
<div>
<div style="width: 400px;">
<div class="top-row">
top stuff
</div>
<div class="bookingTotals middleRow">
middle stiff that fills the gap
</div>
<div class="bookingTotals row">
bottom stuff that i want fixed to the bottom
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to make this layout (I've made a picture to explain what i want to do):
So I've 4 divs where I'm going to put some text inside. I've used flexbox and justify content to align them center, but i want to put a text "Latest News" that is aligned with the first div (in this case Element 1).
I'm not able to think about an elegant solution to my problem, so I'm here to ask for help.
.wrapper{
display: flex;
justify-content: center;
}
.box{
height: 200px;
background-color: red;
margin: 10px;
width: 200px;
}
<p class="section-title">Latest News</p>
<div class="wrapper">
<div class="box">Element 1</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
There are a few ways you can do it, and it depends how dynamic your box elements are going to be.
One simple solution that works for n boxes is to include the section title to the first box and give it position: absolute whilst adding margin-top to the wrapper to make space for the title.
https://codepen.io/anon/pen/MJpOrM
.wrapper {
display: flex;
justify-content: center;
margin-top: 40px;
}
.box {
height: 200px;
background-color: red;
margin: 10px;
width: 300px;
}
.section-title {
position: absolute;
top: 0px;
}
<div class="wrapper">
<div class="box">
<p class="section-title">Latest News</p>
Element 1
</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
Considering that you have a fixed width for your boxes, the easiest solution is to make the section-title a fixed width too:
.section-title {
width: 1260px; //This is merely 300 * 4 + the margin
margin: auto;
}
https://codepen.io/anon/pen/BpWmJV