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>
Related
I have created two div one is with class name .main and the second one is .container.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
position: absolute;
left: 5%;
right: 5%;
top: 25%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
When I am resizing the browser windows vertically the div with the class .container is changing its position. I want it to below the main div.
If you want your div positioned below the .main div (i.e. relative to the .main div), then you should refrain from using absolute positioning and use relative positioning instead. You can also not define a position property - by default it will be set to static, which also works:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
left: 5%;
right: 5%;
top: 100%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
By default, the .main will be below .container. And position: absolute will remove the element completely out of the document flow.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
margin: 0 5%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
Try this.
I'm trying to achieve the below:
So the darker blue box will be the parent div and then the teal blue one will be the child div, see the above image.
I have the below code, but can't seem to work out how to achieve it!
body {
padding: 0;
margin: 0;
background-color: #6ca591;
}
.container {
margin: 50px auto;
width: 1000px;
background-color: red;
padding: 80px;
}
.portfolio_main_img {
background-color: #327acd;
display: block;
position: relative;
padding-bottom: 30px;
z-index: 1;
}
.portfolio_main_img img {
margin: -28px auto 0 auto;
display: table;
position: relative;
width: 50%;
z-index: 99;
}
<div class="container">
<div class="portfolio_main_img">
<img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>
</div>
If anyone could help me out or give me some tips it would be greatly appreciated!
You are facing margin collpasing where the negative margin is pulling the container instead of only the image. Change the image to inline-block to avoid this and center it using text-align
body {
padding: 0;
margin: 0;
background-color: #6ca591;
}
.container {
margin: 50px auto;
width: 1000px;
background-color: red;
padding: 80px;
}
.portfolio_main_img {
background-color: #327acd;
display: block;
padding-bottom: 30px;
text-align:center;
}
.portfolio_main_img img {
margin: -28px auto 0 auto;
display: inline-block;
width: 50%;
}
<div class="container">
<div class="portfolio_main_img">
<img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>
</div>
My site code is very usual
<div class="header"></div>
<div class="site-inner"></div>
<div class="footer"></div>
How can I make header background like on the image?
Is the whole site content have to be position absolute and margin-top:-500px ?
Is that only case to do it?
I assume you mean the overlap.
Negative margin is one way.
.header {
height: 50px;
background: lightblue;
}
.site-inner {
width: 80%;
margin: auto;
height: 50px;
background: lightgrey;
margin-top: -30px;
box-shadow: 0 -2px 2px black;
}
<div class="header"></div>
<div class="site-inner"></div>
You can use:
.header{
width: 80%;
height: 75px;
margin: 0 auto;
margin-top: -20px;
background:#3A3A3A;
}
Take a look at positioning: Positioning, also z-index might be relevant: Z-index, notice in my example the negative index on .header-bg
A quick example:
.header-bg {
width: 100%;
height: 200px;
z-index: -1;
background: lightblue;
position: absolute;
top: 0;
left: 0;
}
.header {
margin-top: 50px;
height: 50px;
background: grey;
z-index
}
.menu {
height: 80px;
}
.site-inner {
height: 400px;
width: 100%;
background: red;
}
<div class="header-bg"></div>
<div class="header"></div>
<div class="menu">menu</div>
<div class="site-inner">Site inner</div>
<div class="footer"></div>
A negative z-index lets you put elements behind others. The answer is simple enough then.
<div class="color"></div>
<div class="fixed">
<div class="header">
</div>
<div class="nav">
Text
</div>
<div class="body">
</div>
</div>
html, body
{
height: 100;
margin: 0;
}
div.color
{
position: absolute; /*Take out of the flow*/
top: 0; /*Move to top left*/
left: 0;
z-index: -1; /*Place below normal elements in the flow*/
width: 100%; /*Fill whole width*/
height: 300px; /*300px tall*/
background: #c7edfb; /*Color specified*/
}
div.fixed
{
margin: 50px auto 0; /*push whole document down 50px and center*/
width: 600px; /*document is 600px wide*/
}
div.header
{
height: 150px; /*top gray block is 150px tall*/
background: #222; /*dark gray*/
}
div.nav
{
padding: 25px 0; /*Gap between blocks above and below*/
}
div.body
{
min-height: 300px; /*Force a height*/
background: #777; /*Light gray*/
box-shadow: 0 0 8px black; /*Drop shadow*/
}
JSFiddle
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>
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>