I don't want them to be on the same level. They are both independent divs. The sidebar is fixed.
Why doesn't the sidebar stick on top instead of being aligned with the article div ?
body{
margin: 0;
padding: 0;
}
div#sidebar{
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 100%;
width: 200px;
position: fixed;
}
div#article{
background-color: blue;
margin-left: 200px;
margin-top: 50px;
height: 500px;
}
HTML :
<div id="sidebar">
sidebar
</div>
<div id="article">
article
</div>
Try this trick : top:-0px;. Don't know, but works for some reason!
body{
margin: 0;
padding: 0;
}
div#sidebar{
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 100%;
width: 200px;
position: fixed;
top:-0px; /* <-- right here */
}
div#article{
background-color: blue;
margin-left: 200px;
margin-top: 50px;
height: 500px;
}
<div id="sidebar">
sidebar
</div>
<div id="article">
article
</div>
Related
I have a super simple example with a wrapper div and another div inside this wrapper called header.
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Is it possible that the inner div called header sticks out of the wrapper on both sides with lets say 20px or even 100viewport wodth?
If I understand you correctly you want the inner header to stick out 20px. You can do that with negative margins:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin-left: -20px;
margin-right: -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
if you want it to stretch through the whole viewport, you might have to position the element absolutely and use left: 0; right: 0;, however IMO it would be cleaner to move the div out of the container in that case.
You could give it a negative left/right margin:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin: 0 -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Trying to get two divs to position each other side by side in a container div, but they will not follow width attributes so I can't get the next to each other. I've tried to use solutions from other questions but none of them have worked.
.intro-container {
width: 100%;
min-height: 400px;
background-color: #fdee58;
margin: 0;
padding: 0;
}
.intro-container-text {
width: 50%;
margin: 0;
padding: 0;
background-color: #ff0000;
float: left;
}
.intro-containter-img {
width: 50%;
margin: 0;
padding: 0;
background-color: #00ffff;
float: left;
}
<div class="intro-container">
<div class="into-container-text"></div>
<div class="intro-container-img"></div>
</div>
You have a mistaken typo in your class attribute.
<div class="into-container-text"></div>
Instead, tt should be
<div class="intro-container-text"></div>
And don't forget to have a div element to clear the floats, this is important to avoid layout problem that arise due to float: left property.
<div class="intro-container">
<div class="intro-container-text"></div>
<div class="intro-container-img"></div>
<div class="clear"></div>
</div>
.clear {
clear: both;
}
First of all you mispelled "intro-container-text"... in your html is "into-container-text" and in css "intro-container-text";
Second you just need to say to the parent that you want the childs to display in line with display:flex;and then you can remove the float.
<div class="intro-container">
<div class="intro-container-text"></div>
<div class="intro-container-img"></div>
</div>
.intro-container {
display: flex;
width: 100%;
min-height: 400px;
background-color: #fdee58;
}
.intro-container-text {
width: 50%;
background-color: #ff0000;
}
.intro-container-img {
width: 50%;
background-color: #00ffff;
}
I created a fiddle for you.
Happy coding :)
use min-height and display: inline-block
check my code:
.intro-container {
width: 100%;
min-height: 400px;
background-color: #fdee58;
margin: 0;
padding: 0;
}
.intro-container-text {
width: 50%;
margin: 0;
padding: 0;
min-height: 100px;
display: inline-block;
background-color: #ff0000;
float: left;
}
.intro-containter-img {
display: inline-block;
min-height: 100px;
width: 50%;
margin: 0;
padding: 0;
background-color: #00ffff;
float: left;
}
<div class="intro-container">
<div class="intro-container-text"></div>
<div class="intro-containter-img"></div>
</div>
Check the naming in the class again.
.intro-container{
width: 100%;
min-height: 400px;
background-color: #fdee58;
margin: 0;
padding: 0;
}
.intro-container-text{
width: 50%;
min-height: 100px;
margin: 0;
padding: 0;
background-color: #ff0000;
float: left;
}
.intro-container-img{
width: 50%;
min-height: 100px;
margin: 0;
padding: 0;
background-color: #00ffff;
float: left;
}
<div class="intro-container">
<div class="intro-container-text"></div>
<div class="intro-container-img"></div>
</div>
I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
This is my code:
The header is in fixed position, and I add a margin and padding zero to body
<body>
<header></header>
<div id="content">
<div id="center"></div>
<div id="a"></div>
</div>
</body>
body {
background-color: gainsboro;
margin: 0;
padding: 0;
}
header {
background-color: black;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#content{
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 900px;
height: 100%;
}
#a{
background-color: white;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 500px;
border-radius: 2px;
}
Now I want to ask, why is body 60px lower. It should not body always be the top 0?
Here is a picture of this:
body height
The margin-top in your #content is pushing the body down. Please read more on collapsing margins.
There is a block with header, body and footer parts inside of it. Header and footer heights are fixed, body height is determined by its content. I need the outer block size to be the size of its contents but not more then the size of its container. If the body height exceeds maximum possible size, then the y-scroll is shown for body, but header and footer stay at the top and bottom of outer block.
I made the FIDDLE. But I could only get as far as when I resize window the scroll appears for outer block, not for body block only.
This is CSS and HTML:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
max-height: 100%;
overflow: auto;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
}
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>text<br>...</div>
<div class='footer'></div>
</div>
</div>
Is it possible to do what I need without using JavaScript?
EDIT: I made an image to make it clear what I need.
Well Here is your code from what I understand that you want the header
sticks to top and footer in the bottom and you can scroll the body if
necessary in the container size.
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
<div class='footer'></div>
</div>
</div>
We need to style the footer and header separately plus your style as you will see in the code below
So you add to .innerContainer (position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;) and for the .body you add(height: 50%; overflow-y: auto;)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
height: 100%;
max-height: 100%;
overflow: hidden;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: absolute;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
min-height: 20px;
max-height: 36%;
overflow-y: auto;
font-size: 20px;
}
I hope that what you want and if you have any question please let me know.
The only solution I've found is using CSS3 calc. Doesn't work in Android browswer, though... FIDDLE
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
overflow: hidden;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
height: 300px;
background: green;
}
.bodyContainer {
max-height: calc(100% - 60px);
overflow-y: auto;
}
<div class='container'>
<div class='header'></div>
<div class='bodyContainer'>
<div class='body'></div>
</div>
<div class='footer'></div>
</div>