I'm trying to create a design using multiple divs using CSS.
I'm already written code for it but don't know what is the problem with my code as my left and right side div not aligning at vertically center and all the divs are not overlapped with main yellow centered div which is I'm unable to achieve.
Note: I tried this with z-index but did not get what I want.
Output I'm getting:
Output I want to achieve:
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
.maind {
margin: 0px auto;
width: 90%;
padding: 10px;
height: 900px;
background-color: rgb(9, 252, 9);
position: relative;
}
.fdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
margin-top: 30px;
border: 2px solid red;
}
.sdiv {
width: 55%;
height: 600px;
background-color: #ffff00ec;
}
.tdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
}
p {
text-align: center;
}
.wrap {
display: flex;
flex-direction: row;
}
.wr1 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
}
</style>
<body>
<div class="maind">
<div class="fdiv">
<p>Some content here...</p>
</div>
<div class="wrap">
<div class="wr1">
<p>Some content here..</p>
</div>
<div class="sdiv">
<p>Some content here..</p>
</div>
<div class="wr1">
Some content here...
</div>
</div>
<div class="tdiv">
<p>Some content here..</p>
</div>
</div>
</body>
</html>
Please somebody help me with the Source Code I tried almost all the related answer.
You can use Flexbox or Positioning.
Using Positioning makes it more flexible to add content to the holder element.
While Flexbox is more flexible when it's about adding and aligning boxes.
# Positioning
Description:
Create 4 elements to be the boxes.
Each .box has it's direction.
Example: <div class="box top"></div>.
Wrap all of them in div.boxes. This way you can separate the .boxes from the content (if there) in the holder,
<div class="boxes">
<div class="box top"></div>
<div class="box right"></div>
<div class="box left"></div>
<div class="box bottom"></div>
</div>
Style the the position of .wrapper so all the positioned absolute elements stays in the .wrapper.
.wrapper {position: relative;}
Finally, set the position of each box:
Example:
.box.top {
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
Notes:
Don't use:
left property on .box.right.
top property on .box.bottom.
It won't set the negative margin which pushes them to edges.
In case content added to the holder (.wrapper), wrap the content in div.content and add inner space using padding. The value of padding in the code example is 40px, which it's related to the .boxes dimenstions.
The space (padding) is added to prevent overflow between content and .boxeses. And we can go further with styling the .boxes with overflow and z-index property.
For more about using negative maring and the boxes dimenstions:
Check for Notes in Flexbox
The Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
width: 600px;
height: 600px;
border: 1px solid;
margin: 50px auto;
}
.box {
position: absolute;
border: 1px solid;
background-color: red;
}
.box.top, .box.bottom {
width: 200px;
height: 80px;
}
.box.left, .box.right {
width: 80px;
height: 200px;
}
.box.top {
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
.box.bottom {
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-bottom: -40px;
}
.box.left {
top: 50%;
left: 0;
transform: translateY(-50%);
margin-left: -40px;
}
.box.right {
right: 0;
top: 50%;
transform: translateY(-50%);
margin-right: -40px;
}
.content {
padding: 40px; /* check notes */
}
<div class="wrapper">
<div class="boxes">
<div class="box top"></div>
<div class="box right"></div>
<div class="box left"></div>
<div class="box bottom"></div>
</div>
<div class="content">
<h1>Hello World!</h1>
</div>
</div>
# Flexbox
Description:
Create 3 elements to hold the .boxes.
top: holding top box
center: holding left and right boxes
bottom: holding bottom box
In other words:
Each .box is nested (a child) in a div that has the class of the direction.
Example: <div class="top">BOX</div>.
Left and right are nested in center.
HTML:
<!-- top box -->
<div class="top">
<div class="box"></div>
</div>
<!-- left, right boxes -->
<div class="center">
<div class="left">
<div class="box"></div>
</div>
<div class="right">
<div class="box"></div>
</div>
</div>
<!-- bottom box -->
<div class="bottom">
<div class="box"></div>
</div>
Wrap all of them in a div.wrapper:
<div class="wrapper">
<!-- top box -->
<div class="top"></div>
<!-- left, right boxes -->
<div class="center"></div>
<!-- bottom box -->
<div class="bottom"></div>
</div>
The lines below will style the 3 elements and set them to their positions, .top will be centered (left right) and on top, .center will be centered from all the directions, .bottom is centered (left right) and at the bottom, by displaying the .wrapper children horizontally (flex-direction: column;) and centered (align-items: center;) with (space-between) them, using flex.
Check: A Complete Guide to Flexbox
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
Then we do something similar with the .center element, by displaying both of left and right next to each other, centered and space-between them.
(No flex-direction property in the declaration, since the default is in a row (vertically))
.wrapper .center {
width: 100%; /* Don't delete, check notes */
display: flex;
justify-content: space-between;
align-items: center;
}
And finally, with negative margin we move the boxes to the edges.
.top .box {
margin-top: -40px;
}
.bottom .box {
margin-bottom: -40px;
}
.center .left .box {
margin-left: -40px;
}
.center .right .box {
margin-right: -40px;
}
Notes:
The left and right boxes are (width: 80px), each, which means the margin should be -40px (80 / 2 = 40) to set on center.
left: margin-left: -40px
right: margin-right: -40px
Same for top and bottom, since the dimensions are flipped.
top: margin-top: -40px
bottom: margin-bottom: -40px
This way, all the boxes are gonna be centered at the edges.
By default, when displaying with flexbox, the parent(.center) will take the width of it's content/children (fitted)! which means, width: 40px * 2, since we have 2 boxes in there. Now to make sure that the space-between value works, we should "stretch" the .center element (parent) by styling it's width to 100% which allows to the boxes to have as much as space-between, then every box is gonna be on it's position.
.wrapper .center {
width: 100%; /* Don't delete, check notes */
}
The Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
border: 1px solid;
max-width: 600px;
min-height: 600px;
margin: 60px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.box {
border: 1px solid;
background-color: red;
}
.wrapper .top .box,
.wrapper .bottom .box {
width: 200px;
height: 80px;
}
.wrapper .center .box {
width: 80px;
height: 200px;
}
.top .box {
margin-top: -40px;
}
.bottom .box {
margin-bottom:-40px;
}
.wrapper .center {
width: 100%; /* Don't delete, check notes */
display: flex;
justify-content: space-between;
align-items: center;
}
.center .left .box {
margin-left: -40px;
}
.center .right .box {
margin-right: -40px;
}
<div class="wrapper">
<div class="top">
<div class="box"></div>
</div>
<div class="center">
<div class="left">
<div class="box"></div>
</div>
<div class="right">
<div class="box"></div>
</div>
</div>
<div class="bottom">
<div class="box"></div>
</div>
</div>
EDIT:
As #anatolhiman mentioned in the comments:
but negative margins will create a problem by having the elements
overflowing right and left (especially on narrow screens).
A simple solution:
(same works for both examples)
wrap the HTML that we added before in another div, .container for example, and add spacing with CSS, either padding or margin works, depends on your situation.
So the question is...
Is it a space within the .container? --> padding.
Or outside of it? --> margin.
Give the .container a background-color, resize the window, and check both margin and padding to see the differences.
HTML - Update:
<div class="container">
<div class="wrapper">
</div>
</div>
CSS - Add:
/* outside space */
.container {margin: 50px;}
/* Or */
/* inside space */
.container {padding: 50px;}
You may have to edit the margin property in .wrapper for top bottom.
Extra space added (50px) to include spaces for the .boxes as well.
Remember: .wrapper{max-width: VALUE} is taking a place in this functionality, since it's max-width is X but it could be smaller. So if the property is width: and not max-width then it'll behave differently, and won't work as expected (fully responsive), unless we use #media query or JavaScript.
Maybe something like following snippet, with absolute positioning:
.maind {
margin: 0px auto;
width: 90%;
padding: 10px;
height: 900px;
background-color: rgb(9, 252, 9);
position: relative;
}
.fdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
margin-top: 30px;
border: 2px solid red;
position: absolute;
top: 0;
left: 35%;
z-index: 22;
}
.sdiv {
width: 80%;
position: absolute;
top: 10%;
left: 10%;
height: 600px;
background-color: #ffff00ec;
z-index: 12;
margin: 0 auto;
}
.tdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
bottom: 20%;
left: 35%;
z-index: 22;
}
p {
text-align: center;
}
.wrap {
display: flex;
flex-direction: row;
}
.wr1 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
top: 35%;
left: 0;
z-index: 22;
}
.wr2 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
top: 35%;
right: 0;
z-index: 22;
}
<div class="maind">
<div class="fdiv">
<p>Top...</p>
</div>
<div class="wrap">
<div class="wr1">
<p>Left..</p>
</div>
<div class="sdiv">
<p>Somessss content here..</p>
</div>
<div class="wr2">
<p>Right...</p>
</div>
</div>
<div class="tdiv">
<p>Bottom..</p>
</div>
</div>
I have a fixed div in a vuejs app that i intend to use as a chat box. The div scrolls it's content within itself. I try to scroll to bottom automatically once chat box is open but it never works.
I have tried to assign scrollHeight to scrollTop but scrollTop always returns 0 even after assignment.
I have also emitted an event to the parent component that contains the scrollBar of the chat window to try to scroll but the problem is the same. scrollTop never gets assigned.
let msg = document.querySelector(".messanger .messanger-body");
msg.scrollTop = msg.scrollHeight;
console.log(msg.scrollTop);
console.log(msg.scrollHeight);
My problem is msg.scrollTop never gets assigned what msg.scrollHeight is. It remains 0.
<div class="messanger">
<div class="messanger-header text-center">
<div class="row h-100">
<div class="col-sm-12 my-auto">
<h2 class="ml-2 text-white">Chat</h2>
<div class="float-left">
<base-button size="sm" class="ml-1" type="primary" #click="returnToPrev">←</base-button>
</div>
<div class="float-right">
<base-button size="sm" class="mr-1" type="primary">Send message</base-button>
</div>
</div>
</div>
</div>
<div class="messanger-body">
<div>
<!-- child component -->
<message-thread :user="msgThread.user" #scrolltobtm="scrollViewToBtm"></message-thread>
</div>
</div>
</div>
I have a CSS like so for the parent component
.messanger {
background: white;
position: fixed;
top: 0;
width: 310px;
height: 70vh;
float: right;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 20vh;
border-top-left-radius: 20px;
border: 2px solid red;
}
.messanger .messanger-header {
position: fixed;
height: 60px !important;
width: 310px !important;
background: #25457a;
color: #ffffff;
z-index: 99999;
border-top-left-radius: 20px;
}
.messanger .messanger-body {
margin-top: 65px;
}
For my child component i have
<div class="message-history mt-2">
<div class="message-history-content">
<div class="text-center mb-4">
<span class="badge badge-info">Thread title : {{threadTitle}}</span>
</div>
<div v-for="(eachMessage, index) in messages" :key="index">
<div :class="messagePosition(eachMessage.added_by)[0]">
<!-- classes msg_container and msg_container_send are dynamically added here -->
<span>{{eachMessage.message}}</span>
</div>
</div>
</div>
<div class="message-input">
<form class="form m-1" #submit.prevent="sendMessage">
<textarea v-model="model.message" class="form-control"></textarea>
<div>
<button class="ni ni-send"></button>
</div>
</form>
</div>
</div>
Child component css
.msg_container {
margin-top: auto;
margin-left: 20%;
margin-right: 10px;
border-radius: 15px;
background-color: #82ccdd;
padding: 10px;
position: relative;
}
.msg_container_send {
margin-top: auto;
margin-right: 20%;
margin-left: 10px;
border-radius: 15px;
background-color: #25457a;
padding: 10px;
position: relative;
color: #ffffff;
}
.message-input {
position: fixed;
bottom: calc(100% - 90%);
background: #ffffff;
z-index: 99999;
}
.message-history {
overflow-x: hidden;
overflow-y: scroll;
margin-bottom: 40px;
}
.message-history .message-history-content {
overflow: scroll;
}
form {
display: flex;
width: 300px;
}
form button.ni.ni-send {
margin-top: 3px;
border-radius: 50%;
border: none;
height: 34px;
width: 34px;
background: #25457a;
color: #ffffff;
}
textarea {
flex-grow: 1;
resize: none;
border: 1px solid #25457a;
}
form button:focus {
outline: 0;
}
Thank you for help in advance.
I added overflow property to the .message-history class, it still doesn't work. I believe my mistake resides in my styles. I'm not much of a CSS person.
The chat window scrolls when the mouse is used to scroll though.
msg.scrollTop could stay with 0 value because of at least two things.
First .messanger-body don't have defined overflow property.
Second as it is initial phase content of .messanger-body have not enough content to make scroll appear on the right side of div.
Please check those options.
I'm trying to get the text in the fixed div to change as you scroll past the main divs that contain the images. I tried following the solution in Changing div content based on scroll position but it won't work. Here is my attempt using that method: http://jsfiddle.net/st6q1Lmo/5/.
I'm a beginner so it's hard for me to write code from scratch. I must be doing something wrong... I would appreciate any help. Thank you!
This is my HTML and CSS without any JS (http://jsfiddle.net/7tdnw1eb/6/):
UPDATE: Thanks to the lead #tera_789 gave me, I've almost got it to work. For the first and third div it works, but for the second the content won't update in the fixed div. I know it could be because the video is only 90vh and the video itself won't scroll in the container... However I need it to be 90vh. How can I get around this? jsfiddle.net/7tdnw1eb/12
body {
background-color: #797979;
color: black;
font-family: serif;
font-size: 2vw;
line-height: 1.1em;
}
#about {
padding-bottom: 1em;
}
#wrapper {
max-width: 100vw;
max-height: 100vh;
overflow: scroll;
padding-top: 1em;
padding-bottom: 1em;
}
.project {
background-color: transparent;
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
padding: 0 2em;
overflow: scroll;
}
.content__container {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#count {
color: black;
width: 20%;
display: block;
position: fixed;
top: 0;
right: 0;
padding: 1em 2em 2em 0;
z-index: 99999999999;
}
img {
max-width: 100%;
}
<div id="wrapper">
<div id="count">
<p>1/3</p>
</div>
<div id="about">
Wassup everyone
</div>
<div class="project">
<div class="content__container">
<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
</div>
</div>
</div>
Take a look at this: onscroll event
I have a position absolute element which has a min-width. What I want to do is to align the absolute element's end to the relative element's end.
The relative element DOES NOT have a fixed width. The width can be vary depending on the content inside.
The use case here is, I'm building a custom dropdown. The relative element is the label which has the selected text and the position absolute element is the dropdown.
<div class="container">
<div class="text">Text from list</div>
<ul class="list">...</ul>
</div>
The image above has the look I'm expecting. What should I do to get this alignment? Can it be done with pure CSS?
.relative-div {
position:relative;
min-height: 50px;
background:#BB9A9B;
}
.abs-div {
position: absolute;
right: 0;
top: calc(100% + 10px);
min-width: 100px;
min-height: 50px;
background: red;
}
<div class="container">
<div class="relative-div">
relative-div
<div class="abs-div"></div>
</div>
</div>
.element {
padding: 0.75rem 1rem;
border: 1px solid navy;
background-color: dodgerblue;
color: white;
margin: 10px 0px;
}
.parent-class {
position: absolute;
right: 0px;
}
.relative-element {
position: relative;
}
.absolute-element {
position: absolute;
min-width: 200px;
right: 0px;
}
<div class="parent-class">
<div class="element relative-element">Relative Element</div>
<div class="element absolute-element">Absolute Element</div>
</div>
i would recommend to use flex-box. here is a cheat-sheet https://css-tricks.com/snippets/css/a-guide-to-flexbox/
hey there i have a div with 100% width (the width of computer screen can be anything) inside this width i have two child divs one with fixed width say 50px and i want the other child div to take up the remaining (100%-50px) space can anyone tell me how do i achieve this please ....
I have done like
<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>
in this code if 50 px is not the 10% of screen the there are some left blank space which I do not want
jsFiddle
Only float the fixed width element.
CSS:
.container {
height: 10px;
width: 100%;
}
.right {
background: red;
height: 10px;
}
.left {
background: blue;
width: 50px;
height: 10px;
float: left;
}
HTML:
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>
You could use a table layout:
HTML:
<div class="container">
<div class="fixed-width"></div>
<div class="fluid-width"></div>
</div>
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.fixed-width {
display: table-cell;
width: 50px;
}
.fluid-width {
display: table-cell;
}
http://jsfiddle.net/myajouri/zJq8N/
OR...
You could use width: calc(100% - 50px) which is not supported in IE8 and below.
.container {
width: 100%;
}
.fixed-width {
float: left;
width: 50px;
}
.fluid-width {
float: left;
width: calc(100% - 50px);
}
http://jsfiddle.net/myajouri/mTq6x/