I am wondering how to position a div relative to a fixed position div within the same parent div. Here is my html structure:
<div class="container">
<header class="site-header>
</header>
<div class="site-page">
</div>
</div>
Here is my css:
div.container {
max-width: 100vw;
height: 100%;
margin: 0 auto;
padding: 0 auto;
}
.site-page {
display: inline-block;
float: right;
width: 80%;
height: 100%;
}
.site-header {
width: 80%;
text-align: right;
position: fixed;
right: 0;
float: right;
}
So, how would I make the .site-page class relative to the bottom of the .site-header class?
Just add margin-top or padding-top the amount of height of the fixed element. I have used padding instead of margin, because the height increase on the div can be countered with border-box.
Or if you choose to do it with margin, then use height: calc(100% - AmountOfHeader).
Also, there is no such thing as padding: auto, it's either 0 or a positive value.
https://jsfiddle.net/8evLtbgr/
div.container {
max-width: 100vw;
height: 100%;
margin: 0 auto;
padding: 0;
color: white;
}
.site-header {
width: 80%;
text-align: right;
position: fixed;
right: 0;
float: right;
height: 100px;
background-color: blue;
}
.site-page {
display: inline-block;
float: right;
width: 80%;
height: 100%;
padding-top: 100px; /* height of header */
background-color: green;
}
/***********/
body { height: 100vh; width: 100vw; margin: 0; } /*need this, because page is empty*/
*, ::before, ::after {
box-sizing: border-box; /* padding and border won't increase size of the elements, namely .site-page */
}
<div class="container">
<header class="site-header">site-header</header>
<div class="site-page">site-page</div>
</div>
Related
How can I have div.fixed at 100% of the width of its parent .content? ... knowing that all widths will be variable, even .content
more or less what I need is .content with position: relative; div.fixed with the position: absolute; and width: 100%; But fixed at the top if I have a vertical scroll
and if possible without using JavaScript, only with CSS.
I was trying several things but none works, thank you for your time and help
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
box-sizing: border-box;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
position: absolute;
box-sizing: border-box;
width: calc(100% - 40px);
}
.content p {
margin-top: 100px;
}
<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
100% of .content? That would be
width:calc(40% - 40px);
change that line:
<div style="width: 90%; margin: 0 auto;">
to
<div style="width: 100%; margin: 0 auto;">
also add to the class:
.fixed {
width: 100%;
}
and remove width:40%; from the .content
I am not sure if i understand the problem correctly, but if you want to make the fixed div to have 100% of its parent, then the following should work
.content {
position: relative;
}
.fixed {
width: 100%;
position: absolute;
}
For your question to be solved, must width of .content equal with width of .fixed so, use of:
.fixed {
width: inherit;
//so .fixed get width 40%
}
But,
.fixed have position:fixed, so 40% is relative to the screen's viewport,
and
.content is 40% relative to his parent[div with width:90%,(90% relative to body)].
in here ,we have to do something to measure both elements relative to one element.so,do this:
html,body {
width: 100%;
margin:0;
}
<div style="width:100%; margin:5px 70px;">
of 90% to 100%----^ ^---^-------optional
also, use margin-left:-20px for remove affect padding:20px in .content.
.fixed {
margin-left: -20px;
//more code...
}
NowŁ you have both elements have width:40% relative to same element.
Note, Get Full Page to better see result.
* {
box-sizing: border-box;
}
html,body {
width: 100%;
margin:0;
}
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
margin-left: -20px;
position: fixed;
width: inherit;
}
.content p {
margin-top: 100px;
}
<div style="width:100%; margin:5px 70px;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
here is my code: http://jsfiddle.net/fxWg7/4041/
I want to make the left sidebar extend down to the footer dynamically. The footer is a sticky footer which means it will stay down there no matter how long the main content is.
I want the left sidebar to extend down to the footer no matter the height of the main content.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 50px;
/* bottom = footer height */
}
.container {
height: auto;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
}
.right {
float: none;
/* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="left">
left content fixed width
<br>
<br> I want this to extend to footer!
</div>
<div class="right">
right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
</div>
</div>
<footer>
This is my footer.
</footer>
UPDATED:
The following css code will do it:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
flex: 1;
}
.left {
width: 180px;
background: #aafed6;
}
.right {
width: auto;
background: #e8f6fe;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
View jsfiddle - http://jsfiddle.net/jalenconner/be71229w/1/
This solution utilizes CSS Flexbox, which you can learn more about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
position: relative;
height: 100%;
}
body {
height: 100%
}
.container {
/* Full Height - height of footer*/
height: calc(100% - 50px);
display: flex;
flex-direction: row;
}
.left {
width: 20%;
float: left;
background: #aafed6;
height: 100%;
}
.right {
background: #e8f6fe;
width: 80%;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
.footer-text {
padding: 1em;
}
Just a little tweak to the body tag fixes it
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html {
position: relative;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.container {
height: inherit;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
height: calc(100% - 50px);/**deduct heght of footer**/
}
.right {
float: none;
/* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other
floated one */
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<body>
<div class="container">
<div class="left">
left content fixed width
<br>
<br> I want this to extend to footer!
</div>
<div class="right">
right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
</div>
</div>
<footer>
This is my footer.
</footer>
</body>
html {
position: relative;
}
body {
margin-bottom: 40px;
}
html, body {
height: 100%;
}
.container {
overflow: auto;
display: flex;
min-height: 100%;
}
.left {
width: 180px;
background: #aafed6;
}
.right {
background: #e8f6fe;
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
}
Use above CSS code, you will get desired output with fixed footer and content with 100% height.
I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?
HTML:
<footer>
<div id="footercontent">
<div id="logobox">
<img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION
</div>
<div id="social">
</div>
</div>
</footer>
CSS:
footer {
width: 100%;
height: 200px;
background-color: white;
position: relative;
margin-top: 70px;
}
#footercontent {
width: 70%;
height: 100%;
background-color: black;
margin: auto;
}
#logobox {
width: 30%;
height: 100%;
margin-right: 0;
float: left;
}
img {
height: 70%;
position: absolute;
margin: auto;
display: block;
}
#social {
width: 70%;
height: 100%;
background-color: white;
float: left;
}
Remove position: absolute and apply margin: 0 auto to img. When position: absolute is applied on some element, it is taken out from the normal flow of DOM
img {
height: 70%;
margin: 0 auto;
display: block;
}
I am working on a horizontal scrolling website and ran into an odd issue. When the window is re-sized horizontally, the height of the header div changes. Any thoughts as to what may be causing this?
My basic html looks something like this:
<div class="container">
<header class="header" id="header"></header>
<div class="content" id="content"></div>
</div>
and here's my CSS:
.container {
box-sizing: border-box;
position: absolute;
float: left;
margin-right: -999999px;
height: 100%;
padding: 50px 0;
max-height: 600px;
vertical-align: baseline;
}
.header {
float: left;
padding: 0 50px 0 0;
height: 100%;
max-height: 500px;
position: fixed!important;
z-index: 1234;
box-sizing: border-box;
}
.content{
margin-left: 320px;
height: 100%;
margin-right: -999999px;
float: left;
position: relative;
}
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}