Having a problem with the size of containers outside of a max-width image and the image itself is not taking up to 60% scale. I Can't show the image scaling issue due to not having a dynamic parent. Remove width/height from #container to see the issue. (Please note I am viewing this on a mobile device)
#container {
width: 320px;
height: 480px;
background: white;
border: 1px solid blue;
}
#img-container {
position: relative;
}
#img-container img {
position: absolute;
max-height: 60%;
}
#leftover {
background: yellow;
width: 100%;
height: 100%;
color: white;
}
<html>
<head>
<title>Stackoverflow example</title>
<body>
<div id="container">
<div id="img-container">
<img src="http://placehold.it/1024x1024.png" width="100%">
</div>
<div id="leftover">
<h1>Should only have 40% leftover after the img-container takes up 60%.</h1>
</div>
</div>
</body>
</head>
</html>
Use id="img-container" instead of class="img-container"
Check your CSS.
#img-container = id="img-container"
.img-container = class="img-container"
<div id="img-container">
<image src="http://placehold.it/1024x1024.png" width="100%">
</div>
you can try tweaking the css a little bit as follows:
html,body{
height: 100%
}
.container{
height: 100%;
background: white;
border: 1px solid blue;
}
#img-container{
position: relative;
height: 60%;
}
img{
max-height: 100%
}
#left-over{
background: yellow;
width: 100%;
height: 40%;
color: white;
}
h1{
margin: 0;
}
You could try
#img-container img {
position: absolute;
max-height: 60%;
}
Related
I'm a beginner and I was playing around with css (code given below)
and I set the yellow div to a 1000px and I thought the blue div would automatically
wrap around it given height:100%;
but to my surprise the yellow div seemed to overflow, I tried using the overflow:auto; but it added a scroll bar to prevent the overflow (which is not what I needed)
so is there anyway that the parent blue div always completely wraps around the yellow div no matter if i set it to a 1000px or 100% height using only CSS?
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
height: 100%;
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
left: 50%;
transform: translate(-50%, 0%);
background: yellow;
height: 1000px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
</body>
</html>
Try like below:
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
min-height: 100%; /* update here */
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
margin: auto; /* remove absolute and center with margin */
background: yellow;
height: 1000px;
}
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin-left: -8px;
margin-top: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: 100%;
height: 100%;
border: 1px solid grey;
margin-left: 250px;
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I'd like to ask why the div #maincontainer doesnt display with widht/height when they are set to be a 100%? If I switch them to a value, not a % it works perfectly fine...
And I'd also like to ask why do I have to set margin-left on that exact div just to make it 100% visible on the page, but it starts from the top (where the topsidecontainer starts) and not from the leftsidecontainer div as well.
Infos:
Position fixed works as the fixed position for the viewport which leave the space for the content you used (i.e the container of it)
without element inside it all container become 0 heighten (i.e body is 0 in height)
if ones parent's height is 0, then it's 100% height will not works which indicates the height of 100% is relative to it's parent. so, 100% of 0 is 0.
use vw or vh instead of 100% for this purpose. becuse it is relative to screen size.
topSideContainer & leftSideContainer are lost their spaces, so mainContainer starts from 0,0 position
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
*{
margin:0;
padding:0;
}
#content{
width: 100%;
height: 100%;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: calc(100vw - 250px);
height: calc(100vh - 60px);
border: 1px solid grey;
left: 248px;
top: 58px;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
% is a relative unit, when you say height:100% you mean i want this element to take the 100% of the height of it's parent.
You want #mainContainer to be have height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is #content and it is also height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is <body> and it's height is 0. Why? Because you didn't specify a height for it.
Do you see a pattern forming here ?
height:100% On the other elements work because you set their position to fixed, because of that they become relative to the initial containing block that is being <html>/viewport and <html>/viewport has a height/width (the browser basically)
Note: A position other than static or relative will take the element out of the document flow, meaning it will not affect other elements and there could be overlap
To achieve that layout, we can simply using flexbox if you don't mind changing the html.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
/* propagate the height from the html down to the body then #content */
}
#content {
display: flex;
flex-direction: column;
height: 100%;
}
#topSideContainer {
flex: 0 0 60px;
background-color: red;
}
#bottomSideContainer {
display: flex;
flex: 1;
}
#leftSideContainer {
flex: 0 0 250px;
background-color: orange;
}
#mainContainer {
height: 100%;
flex: 1 0 0;
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="bottomSideContainer">
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
</div>
Or CSS Grid without changing the html
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#content {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
height: 100%;
}
#topSideContainer {
background-color: red;
grid-column: span 2;
}
#leftSideContainer {
background-color: orange;
}
#mainContainer {
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
Note: If the above code didn't work for you, try to share the link to your website so we can look and analyze your style sheet if you have any forced instructions that stopped the code to work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin: -8px;
padding: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: absolute !important;
background-color: #615e57;
max-width: 200% !important;
width: 100% !important;
background: yellow;
height: 100%;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I have a div with position: fixed but when I scroll the window at the bottom the div overlaps with the footer. I dont want the div to overlap with the footer.
What changes should I make in css to overcome that.
a.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="contain">
<div class="data1"></div>
<div class="data"></div>
</div>
<div class="footer"></div>
</body>
</html>
a.css
.contain {
margin-bottom: 35rem;
}
.data {
background-color: red;
width: 30%;
margin-top: -33%;
position: fixed;
height: 600px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
Just replace fixed with sticky. Please modify the code like below and see that works for you:
.contain {
/* margin-bottom: 35rem; */
}
.data {
background-color: red;
border: 4px solid black;
width: 30%;
bottom: 30%;
position: sticky;
height: 300px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 350px;
bottom: 0;
}
I would like to have an element looking like a navbar at the top of my website:
It should be fixed, like a navbar. However, as soon as the user scrolls down, it should disappear under the rest of the content:
I tried something like that, where the #title element is the "navbar":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="title" class="center-align">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase" class="center-align">
</div>
</body>
<style>
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
}
#showcase {
margin-top: 50vh;
height: 75vh;
background-color: #212121;
}
</style>
</html>
However this is not working, the #title seems to be also affected by the 50vh margin-top (you can see it by setting its z-index to 1 instead of -1).
No need to use z-index
By default sibling are stacking by the order from bottom to top so the 1st child will at the bottom, the last child at the top. See example here:
Example of sibling z-index:
.div1 {
width: 100px;
height: 100px;
background: red;
}
.div2 {
margin-top: -50px;
margin-left: 50px;
width: 100px;
height: 100px;
background: green;
}
.div3 {
margin-top: -50px;
margin-left: 100px;
width: 100px;
height: 100px;
background: aqua;
}
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
Solution to your problem:
#title {
width: 100%;
height: 100px;
text-align: center;
position: fixed;
top: 0;
}
#showcase {
margin-top: 120px;
height: 90vh;
background: black;
}
<div id="title">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase">
</div>
Try change your style with the following css . I made some changes for test purpose.
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
background: red ;
top:0;
}
#showcase {
margin-top: 50vh;
height: 275vh;
background-color: #212121;
}
Hope it helps
Here's an example using a fixed navabr and a normal div for the content having a margin-top:
body {
margin:0;
height:100%;
}
.navbar {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
background-color: lightblue;
z-index:-1;
}
.content {
width: 100%;
float: left;
height: 1000px;
margin-top: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div class="content">
Content
</div>
</body>
</html>
Add top: 0 to the title id. Like:
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: 1;
top: 0;
}
I have 2 div inside a wrapper div. I wanted to stack div2 below div1 but it keep overlay div 1 instead. Can anyone help ?
Here my code
CSS:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
position: absolute;
background-color: #bdc3c7;
width: 100%;
height: 75%;
margin: 0;
display: block;
float: left;
left: 0;
top: 0;
}
.div2 {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
background-color: red;
}
.compass {
position: relative;
width: 180px;
height: 190px;
float: right;
margin-top: -1%;
overflow: hidden;
}
**HTML:**
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
</body>
</html>
Have try solution like using absolute position but it doesn't work.
Change the css on div2 to position relative to the bottom
.div2 {
position: absolute;
width: 100%;
height: 25%;
bottom: 0;
left: 0;
background-color: red;
}
You have used absolute positioning to specifically place the div elements at the same position. Remove the absolute positioning (and float also), and the div elements line up one below the other:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: blue;
}
.div1 {
height: 75%;
background-color: #bdc3c7;
}
.div2 {
height: 25%;
background-color: red;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
Try this instead https://jsfiddle.net/2Lzo9vfc/143/
CSS
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
background: #bdc3c7;
width: 100%;
display: block;
height: 75vh;
}
.div2 {
background: red;
width: 100%;
height: 25vh;
display: block;
}
Your're mixing several layouyt modes. If you use floats for this then you cant't mix it with absolute positioning...
Anyway div is a block tag, what means that your two divs should stack even if you don't set any css property to them, just give the a concrete height, for example 200px.
If you want to cover the full browser viewport, that is what I think you want then is enough with this:
.wrapper {
width: 100%;
height: 100vh;
background-color: blue;
}
.div1 {
background-color: #bdc3c7;
width: 100%;
height: 75vh;
}
.div2 {
width: 100%;
height: 25vh;
background-color: red;
}