I set up 2 divs with some backgrounds and I want to set div2 under div 1, but I don't know how to do this, please help. Now, div2 is over div1 and div1 is invisible on this website.
.div1 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
}
.div2 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
}
<div class='div1'>Some very important text...</div>
<div class='div2'>Not so important text...</div>
Maybe this helps you, I added a top: 100%; to div2.
.div1 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
background-color: red;
}
.div2 {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 100%; /*Changed*/
left: 50%;
right: 0;
bottom: 0;
margin-left: -51%;
background-color: blue;
}
.div1::-webkit-scrollbar {
display: none;
}
.div2::-webkit-scrollbar {
display: none;
}
<div class="div1">a</div>
<div class="div2">a</div>
Related
In my webpage I have a left and a right part, they are not on the same nesting though. I want the left part to fill 25% of the page and the right part to fill the rest of the width.
Simply putting 75% isn't cutting it for me because the right part also needs a 30px right margin. A right padding won't work because my content and background-color overflows then.
Do you have an idea how to solve this?
The .left (blue) and .right(yellow) div should always perfectly meet each other and the .right needs to keep it's 30px right margin.
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: 75%;
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
It's not a good idea to create a layout using only absolute position. You may better rely on flexbox for example:
body {
height: 100vh;
margin: 0;
display: flex;
background: grey;
}
.left {
flex: 1;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
flex: 4;
margin-top: 45px;
margin-right: 30px;
background-color: yellow;
}
<div class="left">TEST</div>
<div class="right">TEST</div>
But in case you want to keep your code, you need to consider the margin within the calculation of the width:
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: calc(75% - 30px);
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
I am not getting the scroll on the browser. i have tried with overflow: scroll and also with no over flow.
body {
margin: 0;
overflow: scroll;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 320px;
background-color: #1f1f1f;
color: white;
text-align: center;
}
.slide {
position: fixed;
top: 0;
right: 0;
height:450px;
width: 1041px;
background-color: orange;
text-align: center;
}
.meanu {
position: fixed;
top: 50%;
bottom: 50%;
width: 80%;
left: 20%;
right: 0;
}
That is because everything is position:fixed and these elements do not affect the flow.
As far as scrolling is concerned, the fixed positioned elements do not exist.
As demonstrated here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.
The html is very basic
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
and here's the css:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
The scrollbar keeps going under the header div. What am I doing wrong?
The below code does the trick
http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}
If I understand correctly you want the scrollbar always ontop. To do so change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scroll on html will allow the entire page to have scroll while keeping header static and remove scroll from container.
.container {
margin-top:50px; /* create room for header*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
margin-top:-50px; /* move up by 50px*/
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
fixed positioned elements have "no width and height".
Hope it helps :)
EDIT: See this pen: This
Ps. I guess you also want to remove the margin of .content
i tried with replacing position:fixed with position:sticky and added top:0 and it worked well for me, no more overlapping vertical scrollbar.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: red;
}
Remove overflow-y: scroll; from your .container
put the overflow-y: scroll; inside the body element:
body {
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think?
This is the code I currently have:
.container{
position: relative;
height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
}
#round-image{
position: absolute;
left: 35%;
top: 30%;
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
}
I don't see any problem with using absolute positioning in this case, if it meets your needs, it's just okay to use it.
However it seems the third DIV #round-image is not aligned properly at the middle, because of using a mix of absolute length px and percentage for sizing/positioning the box.
Considering the following markup, the issue can be fixed by:
1. using negative margins on on the third DIV.
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
2. Or using calc() function:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
3. Or using CSS transform:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
transform: translate(-50%, -50%); /* vendor prefixes ommited due to brevity */
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
It's worth noting that the two last methods are only supported on IE9+.
You want the circle in the middle I would imagine?
If you don't care for validation then you can simply put center tags and the div you want in the middle between them tags or you can use the "Margin" aspect of CSS to align it in the center
The only thing, I think is in a need of improvement is the way you center positioned the circle element. Giving it 50% absolute positions and half-width negative margins would ensure it would be in a good place whatever the dimensions are.
.container{
position: relative;
height: 700px;
width: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: black;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: grey;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
border-radius: 50%;
background: pink;
}
<div class="container">
<div id="top-div">
</div>
<div id="round-image">
</div>
<div id="bottom-div">
</div>
</div>
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/