i'm trying to split the page in 4 parts, but with different sizes. With the following code, i get 2 parts horizontally.
But when i want to insert the first vertical in the green area, only a part is displayed...
I need look like this: http://prntscr.com/mp1sxi
This is my code:
#top,
#bottom,
#right,
#left.
{
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: blue;
height: 20%;
}
#bottom {
bottom: 0;
background-color: green;
height: 80%
}
#right {
right: 0;
background-color: orange;
width: 20%;
}
#left {
left: 0;
background-color: red;
width: 80%;
}
<div id="top">top
</div>
<div id="bottom">bottom
<div id="left">top</div>
</div>
Someone can help me?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
#top,
#bottom,
#right,
#left {
position: fixed;
overflow: auto;
}
#top {
top: 0;
left: 0;
background-color: palevioletred;
height: 20%;
width: 100%;
}
#bottom {
left: 0;
bottom: 0;
background-color: green;
height: 20%;
width: 80%;
}
#right {
right: 0;
background-color: blue;
width: 20%;
top: 20%;
height: 80%;
}
#left {
left: 0;
width: 80%;
top: 20%;
height: 60%;
background: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="top">top</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="bottom">bottom</div>
</body>
</html>
Related
In the html code below , every div tag with "right" class name are side of a hollow rectangle at the right side of the screen and the "left" divs are side of a hollow rectangle at the left side of the screen, i want to use hover so when i hover mouse on every side of the left or right rectangle all sides of the rectangle come to top of the screen, html and css codes are shown below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>
</body>
</html>
css code:
body{
margin: 0;
}
#container{
position: relative;
background: #D5D8DC;
height:400px;
width: 400px;
margin-top: 100px;
margin-left: 100px;
}
.right{
background: #2ECC71;
}
.right:nth-child(1){
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2){
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3){
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4){
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left{
background: #E74C3C;
}
.left:nth-child(5){
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6){
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7){
position: absolute;
height: 10%;
width: 80%;
left: 0;
top: 20%;
}
.left:nth-child(8){
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
right: 20%;
}
.right:hover{
z-index: 10;
}
as you see when i used .right:hover{z-index:10} it doesn't apply to all right sides , it applys the z-index to the side that the mouse has hoverd on it...
note: i don't have permission to use javascript or change html code, i should solve the problem just by writing css code
Based on your HTML structure you can manage this with a sibling selector and well as a direct one, for instance:
.right:hover ~ .right,
.right:hover {
z-index: 10;
}
body {
margin: 0;
}
#container {
position: relative;
background: #D5D8DC;
height: 100px;
width: 100px;
margin-top: 10px;
margin-left: 10px;
}
.right {
background: #2ECC71;
}
.right:nth-child(1) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2) {
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4) {
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left {
background: #E74C3C;
}
.left:nth-child(5) {
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7) {
position: absolute;
height: 10%;
width: 80%;
left: 0;
top: 20%;
}
.left:nth-child(8) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
right: 20%;
}
.right:hover~.right,
.right:hover {
z-index: 10;
}
.left:hover~.left,
.left:hover {
z-index: 10;
}
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>
To select other elements based on other elements you can using ~ or +.
in your case ~ is the best approach You can read about all the css HERE
Now those selectors only select downward what i mean is if you'd hover on the last element nothing the above elements won't be affected because it only selects the preceding elements.
with in mind we seems like if we hover on the last div would be problematic because it won't select the other div to bring them up however in your case we can manipulate the elements placement, we put the last div the one if we hover over won't affect the other to the top to be the part of the rectangle that is always has a part of it hidden by the other rectangle, so then when we hover over it it will show up if we hover other the other elements it will show up also. Sorry if my explanation is a bit difficult to understand.
here's a working demo
body {
margin: 0;
}
#container {
position: relative;
background: #D5D8DC;
height: 400px;
width: 400px;
}
.right {
background: #2ECC71;
}
.right:nth-child(1) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2) {
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4) {
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left {
background: #E74C3C;
}
.left:nth-child(5) {
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7) {
position: absolute;
height: 80%;
width: 10%;
right: 20%;
top: 20%;
}
.left:nth-child(8) {
position: absolute;
height: 10%;
width: 80%;
top: 20%;
}
.right:hover ~ .right,
.right:hover {
z-index: 10;
}
.left:hover ~ .left,
.left:hover {
z-index: 10;
}
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>
I have few divs like this:
<div id=1>
<div id=2></div>
<div id=3></div>
<div id=4>
<div id=5></div>
</div>
</div>
What I need is set up divs like this:
div 2 is on top left, div 3 is on top right, div 4 is at the bottom right and div5 at the top center of div 4
Problem is that I need to do it only in CSS and without class.
I'm not sure I understand your question, but I would do that:
<html>
<head>
<style>
#p1 {
height: 200%;
}
#p2 {
background-color: red;
width: 49%;
height: 48%;
position: fixed;
left: 0%;
top: 0%;
}
#p3 {
background-color: green;
width: 49%;
height: 48%;
position: fixed;
right: 0%;
top: 0%;
}
#p4 {
background-color: blue;
width: 100%;
height: 48%;
position: fixed;
right: 0%;
bottom: 0%;
}
#p5 {
position: absolute;
right: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id=p1>
<div id=p2>2</div>
<div id=p3>3</div>
<div id=p4>4
<div id=p5>5<br>loren ipsum</div>
</div>
</div>
</body>
</html>
This is if you want the div fixed instead if you want div absolute you can try this:
<html>
<head>
<style>
#p1 {
height: 200%;
}
#p2 {
background-color: red;
width: 49%;
height: 48%;
position: absolute;
left: 0%;
top: 0%;
}
#p3 {
background-color: green;
width: 49%;
height: 48%;
position: absolute;
right: 0%;
top: 0%;
}
#p4 {
background-color: blue;
width: 100%;
height: 48%;
position: absolute;
right: 0%;
bottom: 0%;
}
#p5 {
position: absolute;
right: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id=p1>
<div id=p2>2</div>
<div id=p3>3</div>
<div id=p4>4
<div id=p5>5<br>loren ipsum</div>
</div>
</div>
</body>
</html>
You can use:
#d1 {
position: relative;
height: 100px;
width: 100px;
}
#d2 {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: red;
}
#d3 {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: blue;
}
#d4 {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
background-color: green;
}
#d5 {
position: absolute;
top: 0;
width: 25px;
height: 25px;
left: 0;
right: 0;
margin: 0 auto;
background-color: yellow;
}
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4">
<div id="d5"></div>
</div>
</div>
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
Below is my CSS and HTML code. As you can see the margin on right is not coming.
Can anybody tell me the reason for this?
Is the structure of HTML, CSS right? I have to show two windows in the middle of the page and a footer and a header. So, I have positioned everything absolute.
Is that correct practice?
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
min-width: 100vh;
}
.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}
.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}
.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
position: absolute;
width: 100%;
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<div class="wrapper">
<div class="header"> </div>
<div class="window">
<div class="sub-window left-window"> </div>
<div class="sub-window right-window"> </div>
</div>
<div class="footer"> </div>
</div>
</body>
</html>
Apply width calc like
.window {
background-color: #eee;
bottom: 10%;
margin: 10px;
position: absolute;
top: 10%;
width: calc(100% - 20px); /*You apply margin:10px;*/
}
that is just because your width is 100% and you applied an margin of 20 px(margin-left:10,margin-right:10) => in effect it requires space of 100% + 20px. that is the reason for you can trace out margin on your right side.
use width: calc(100% - 20px); on your .window ,it will works fine.
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
min-width: 100vh;
}
.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}
.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}
.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
position: absolute;
width: calc(100% - 20px);
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="window">
<div class="sub-window left-window">
</div>
<div class="sub-window right-window">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Alright so I got 1 div that is float left and one with float right, now for some reason I cannot make them go to the side where they should be. They are kinda now both overlapping eachother
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
}
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left"></div>
<div id="page_right"></div>
</div>
I also tried using a method with display inline block but it didnt work out so well
Try this with your additional css
CSS
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left {
left: 0;
}
#page_right {
right: 0;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
remove left: 0px
OR
remove position: absolute
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
z-index: 1000;
}
the overflow in happened because you given left:0px and position:absolute for both the divs,I'm solved this and and added the snippet below.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left{
left: 0px;
}
#page_right{
background-color:green;
float:right;
position: absolute;
right: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left">
</div>
<div id="page_right">
</div>
</div>
</body>
</html>