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;
}
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>
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>
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;
}
HTML:
<div class="container">
<div class="mainContent"></div>
<div class="sidebar"></div>
</div>
CSS:
#container {
min-width: 1170px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
#mainContent {
min-width: 1200px;
width: 85%;
float: left;
}
#sidebar {
min-width: 200px;
position: fixed;
width: 15%;
display: inline-block;
margin: 0px 0px 5px 5px;
vertical-align: middle;
max-height: 810px;
overflow: auto;
}
Here mainContent is scrolling with fixed sidebar.
I am trying to give scrolling property for sidebar separately using overflow: auto.
But I wish to hide sidebar's scrollbar.Just hide not disabling scrolling.
Can you to tell me how to do this with above properties?
You can try this:
#mySidenav {
overflow-x: hidden;
-webkit-scrollbar{
width: 0px;
background: transparent;
}
I've looked on previous SO posts and tuts but have not had any luck with my own code. My footer will not stick to the bottom of the page (not the window). I don't want content to scroll through my footer. The page sizes vary greatly in length and want to have a footer at the bottom at all times.
The leftcol, rightcol, and footer are all in the container. Any help would be awesome.
My HTML is structured as so:
<body>
<div id = "container">
<div id = "leftcol">
<h2></h2>
</p>
</div>
<div id = "rightcol">
<h2></h2>
</p>
</div>
<div id ="footer">
<p>...........</p>
</div>
</div>
</body>
Here is my CSS:
body {
font-family: 'Rokkitt', Georgia, serif;
font-size: 16px;
background-color: #FFFFFF;
line-height: 1.3em;
height: auto;
color: #252525;
}
#container {
display: block;
width: 1024px;
min-height: 100%;
margin-left: auto;
margin-right: auto;
}
#leftcol {
display: block;
float: left;
margin: 20px 5px 5px 15px;
width: 660px;
position: absolute;
height: auto;
padding-bottom: 20px;
}
#rightcol {
display: block;
float: right;
margin: 30px 5px 5px 780px;
position: absolute;
width: 275px;
height: auto;
}
#footer {
position: fixed;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
you need to move your footer outside of the container element and the body element and use position:absolute; and bottom:0; to always fix it to the bottom of the html element.
I say outside of the body as, although majoritively the body tag takes o the height of the html element, there are some versions of IE in which this isn't the case. As you haven't pasted your HTML i obviously can't show you the revised html but you're css should look like:
#footer {
position: absolute;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}