I need to add two div in top and bottom of fixed div,so I create fixed position panel in left, then add first div with h-100 class(height 100%). But Now, when I add second div in panel, I cant see this div in result.
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.second {
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side">
<div class="first h-100">
First div
</div>
<div class="second">
second div
</div>
</div>
Demo HERE
I nee to this:
You can do this with flex utilities. Demo: here
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.second {
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side d-flex flex-column">
<div class="first h-100 text-center">
First Div
</div>
<div class="second d-flex align-items-center justify-content-center">
Second Div
</div>
</div>
I think this is what your expecting, as per your description, you can adjust the height & width as per your need
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.first {
width: 250px;
height: 100px;
background:blue;
border-top: 1px solid #e9e9ef;
}
.second {
width: 250px;
height: 100px;
background:Red;
border-top: 1px solid #e9e9ef;
}
<div class="vertical-side">
<div class="first">
First Div
</div>
<div class="second">
Second Div
</div>
</div>
Your 2nd div is under your first div, which is 100% of its parent height. that means the 2nd div is out of the viewport. use flex/grid for your parent div (vertical-side). you'll find the 2nd div. use a height for your first div. that will also solve the issue.
In HTML, You are basically building in layers - So your second div was butted up against your first div, whereas you wanted it at the bottom. By putting in a third one in between the two as you can see with my spacer div it essentially provides you with margin between your top and bottom divs that you can still use and work with later on.
CSS
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.top {
width: 250px;
height: 100px;
border-bottom: 1px solid #e9e9ef;
}
.spacer {
height: 45%;
}
.bottom {
margin-top: 100%;
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}
HTML
<div class="vertical-side">
<div class="top">
<h1>First div</h1>
</div>
<div class="spacer">
<h3>Spacer</h3>
</div>
<div class="bottom">
<h1>second div</h1>
</div>
</div>
Image of how it looks
Edit any specifics you need/want
you have in class .vertical-side : bottom: 0; and top: 0;
remove bottom: 0; perhaps this helps
alternatively you can use grid and change the height here: grid-template-rows: 1fr 60px;
or grid-template-rows: 1fr 1fr for automatic height.
.vertical-side {
display: grid;
grid-template-rows: 1fr 60px;
width: 250px;
height: 100vh;
}
.first {
display: grid;
align-items: center;
justify-content: center;
background: grey;
}
.second {
display: grid;
margin-top: 2px;
align-items: center;
justify-content: center;
background: green;
}
<div class="vertical-side">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>
Related
I want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I want .board element to have a square aspect ratio. I want to show two of them side by side, together covering the width of their parent.
I don't want to use width: 50%, because I want to position .wrap element with display: flex.
.board {
position: relative;
background: red;
width: 100%;
height: 0;
padding-bottom: 100%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
When I do it like this, I get two divs with squashed width.
Use aspect-ratio and flex:1
.board {
position: relative;
background: red;
flex:1;
aspect-ratio:1/1;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
Alternatively flex:1 and padding-bottom:50%;
.board {
position: relative;
background: red;
flex: 1;
padding-bottom: 50%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
I have two squares inside of a container that are overlapping using transform: translate and I want to remove the padding to the right of the blue square so that the container perfectly fits the width of the children. Please see image for clarification.
Picture of issue
I’ve tried sizing the container to 90px, which should be the width of the children (50px + 50px - 10px), but when I do this the blue box drops to the next row. Why does it do this? I also tried applying padding-right: 0 but nothing changed.
.container {
width: 110px;
border: 1px solid black;
}
.box {
height: 50px;
width: 50px;
display: inline-block;
}
.one {
background: red;
}
.two {
background: blue;
transform: translate(-10px, 15%);
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
I would like there to be no left or right padding.
Use position: absolute with top and left/right, don't forget position: relative on the container:
.container{
width: 90px;
border: 1px solid black;
padding-right: 0;
position: relative;
}
.box{
height: 50px;
width: 50px;
display: inline-block;
}
.one{
background: red;
}
.two{
background: blue;
position: absolute;
left: 40px;
top: 15%;
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
Just add a negative margin-right to second square
.container {
width: 94px;
height: 57px;
border: 1px solid black;
}
.box {
height: 50px;
width: 50px;
display: inline-block;
}
.one {
background: red;
}
.two {
background: blue;
margin-right: -10px;
transform: translate(-10px, 15%);
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ
I have a fixed positioned DIV called Lightbox. My problem is that the close button doesn't stay on the top right, when I scroll the content.
How can I achieve that the close button stays on the top right corner?
Fiddle Link
.lightbox {
position: fixed;
background: white;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
border: 1px solid black;
margin-left: -300px;
margin-top: -200px;
z-index: 10000;
overflow-y: auto;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
background: black;
color: white;
font-weight: bold;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
}
.item {
width: 250px;
display: inline-block;
border: 1px solid blue;
height: 300px;
background: lightblue;
}
<div class="lightbox">
<div class="close-btn">x</div>
<div class="items">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
Make the item div scrollable instead of the lightbox, then the close button will stay absolutely positioned in the top right corner.
Here is the CSS that I changed:
.lightbox {
overflow: hidden;
}
.close-btn {
top: 5px;
right: 20px;
}
.items {
width: 600px;
height: 400px;
overflow-y: auto;
}
JSFiddle: http://jsfiddle.net/dgw8tj5r/4/
You can achieve a sticky button to your lightBox div by adjusting your HTML a bit and adding a container to your lightBox content:
<div class="lightbox">
<div class="close-btn">x</div>
<div class="container">
<div class="items">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
</div>
Then instead of the .lightbox div, you add your width, height, overflow properties on this new .container.
.container{
overflow-y: auto;
width: 600px;
height: 400px;
}
Now your close-btn will not be included in the scrolling part.
JSFiddle demo
EDIT: Benjamin's answer is a more efficient version since you actually already have a containing div: .items. You can use that instead of adding a new one.
Draw light box with proper position.
2.Add close button and container inside light box ans close button position where you need.
3.Finally added items inside container.
thats it.
thanks.
Fixed here
<div class="lightbox"><div class="close-btn">x</div>
<div class="lightboxdv">
<div class="items">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
</div>
.lightbox {
position: fixed;
background: white;
top: 50%;
left: 50%;
border: 1px solid black;
margin-left: -300px;
margin-top: -200px;
z-index: 10000;
overflow:hidden;
}
.lightboxdv{
width: 560px;
height: 400px;
overflow-y: auto;
}
.close-btn {
position: absolute;
top: 0;
right: 20px;
background: black;
color: white;
font-weight: bold;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
}
.item {
width: 250px;
display: inline-block;
border: 1px solid blue;
height: 300px;
background: lightblue;
}
All you need to do is change .close-btn position to fixed.
.close-btn {
position: fixed;
}
I hope it works!