I have a div#B in the div#A in HTML. div#A has padding in the CSS file and I want to doesn't affect on the div#B; I tried this ↓ but because of percent format they have, it doesn't work (doesn't fit completely to parent div because of the percent)!
div#wrapper {
width: 80%;
margin: 5px auto;
background: blue;
}
#sidebar {
float: left;
width: 19%;
margin-right: 1%;
background: green;
border-radius: 5px;
}
#A {
padding: 0.5% 2%;
width: 76%;
background: red;
float: right;
margin-bottom: 5px;
}
#B {
border-radius: 5px 5px 0 0;
height: 116px;
background: green;
}
<body style="background: aqua;">
<div id="wrapper">
<div id="sidebar">this is sidebar and there is something here i dont know for now :))</div>
<div id="A">
<div id="B">
</div>
</div>
</div>
</body>
it works fine, made few minor updates to your css, have a look at the below-working snippet :)
#A {
padding: 1%;
background: red;
}
#B {
margin: -1%;
background: green;
}
<div id="A">
<div id="B"> </div>
</div>
based on updated requirements, in your project can u update the position and height of the #A, if yes then below snippet will work for you
div#wrapper {
width: 80%;
margin: 5px auto;
background: blue;
}
#A {
padding: 0.5% 2%;
width: 76%;
background: red;
margin-bottom: 5px;
position: relative;
height: 116px;
}
#B {
background: green;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="A">
<div id="B">
</div>
</div>
</div>
If you add padding on your B, it will be solve your problem.
#B{
padding: 20%;}
Like that example.
#B {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
The idea here is to push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with a negative margin margin-left: -50vw;.
Related
Hello All below is the expected output what i want to achieve. I tried but lacking some where. Below is my code.
I am using Z index all seems ok but when seen in mobile the design is not up to the mark.
Below is my code.
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
position: relative;
background: #EEE;
height: 60vw;
width: 80vw;
}
.wrapper div {
position: absolute;
height: 25%;
width: 20%;
}
.wrapper .one {
top: 26px;
left: 150px;
background: blue;
z-index: 1;
box-shadow: 0px 10px 50px #00000026;
}
.wrapper .two {
top: 50%;
left: 50%;
margin: -23% 0 0 -31%;
height: 60%;
width: 40%;
background: red;
}
.wrapper .three {
top: 620px;
left: 450px;
height: 6%;
background: green;
}</style>
</head>
<body>
<div class="wrapper">
<div class="one">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
</div>
<div class="two"></div>
<div class="three">Read More</div>
</div>
</body>
</html>
You should provide more details about what your actual question is. There are a lot of differences between the mock-up and your html + css.
Nevertheless I think you have a general problem with how you layout things.
For responsiveness you should generally avoid using fixed pixels + position absolute. This might work on one screen size but not on others.
Try to achieve your desired output with the appropriate tools like css grid/flex.
But for the sake of the question you can move one into two:
...
<div class="two">
<div class="one">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
</div>
</div>
<div class="three">Read More</div>
...
and adjust your style like this:
.wrapper .one {
top: -20px;
left: -20px;
background: blue;
z-index: 1;
box-shadow: 0px 10px 50px #00000026;
position: relative;
}
PS. You can get rid of the white border around the page with body { margin: 0; }
<style>
body {
margin: 0px;
padding: 0px;
}
.wrapper {
position: relative;
background: #EEE;
min-height: 100%;
width: 100%;
padding: 5px 0px;
}
.wrapper div {
height: 25%;
width: 20%;
}
.wrapper .one {
height: auto;
left: -10px;
top: -10px;
background: blue;
z-index: 1;
box-shadow: 0px 10px 50px #00000026;
position: absolute;
}
.wrapper .two {
margin: 0px auto;
min-height: 480px;
/* max-width: 767px; */
background: red;
position: relative;
margin-top: 20px;
width: 100%;
max-width: 480px;
}
.wrapper .three {
bottom: -10px;
right: -10px;
display: block;
width: 100px;
height: 20px;
text-align: center;
background: green;
position: absolute;
}
</style>
use this as html
<div class="wrapper">
<div class="two">
<div class="one">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
</div>
<div class="three">Read More</div>
</div>
</div>
u can try like this
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
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
I am currently trying to fit an image into a div container, but it doesnt work. I have got a complex div-tree on my page, that looks like this:
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
And the following CSS:
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
width: auto;
height: auto;
display: inline-block;
max-height: 100%;
background-color: black;
padding: 20px;
}
#d {
width: 400px;
background-color:yellow;
max-height: inherit;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
I want the image to be fitted into the blue container. It should also take care on the given div containers. Currently the black one does not fill till the end plus padding of the container.
Demo Fiddle
I hope someone is able to help.
Here is a new concept for you. box-sizing: border-box incorporates the padding into the percentage width and heights automatically. The image no longer needs position: absolute.
The width and height of all the inner divs are controlled by the width on the #a container and their padding.
New Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#a {
background-color: red;
position: relative;
text-align: center;
width: 400px;
padding: 20px;
}
#b {
background: blue;
padding: 20px;
}
#c {
background-color: black;
padding: 20px;
}
#d {
background-color: yellow;
padding: 20px;
}
img {
width: 100%;
display: block; /* remove inline gap */
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Old Answer
Remove width: auto; height: auto; and padding: 20px on #c
Place height: 100% on #c
Reason this happens - The height: 100% of #c is affected by the padding on #b so any extra padding will blow up the height.
Demo
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
height: 100%;
display: inline-block;
background-color: black;
}
#d {
width: 400px;
background-color:yellow;
max-height: 100%;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Here And try giving " #d" a height
#d > img {
width: 100%;
height: 100%;
text-align:center;
}
Would like to place the bottom (green) container below the left and right containers (red and blue) but still keep it inside the main (black) container. Cannot get it to work. Any suggestions? (jsfiddle):
<!DOCTYPE HTML>
<html>
<body>
<div class="main_container">
<div class="left_container">
</div>
<div class="right_container">
</div>
<div class="bottom_container">
</div>
</div>
</body>
</html>
CSS:
div.main_container {
background: #000;
border: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
width: 100%;
min-height: 400px;
margin: auto;
position: relative;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
background: red;
margin: 0;
min-height: 100%;
padding: 0;
}
div.right_container {
position: relative;
margin-left: 220px;
width: 715px;
height: 100px;
background: blue;
}
div.bottom_container {
width: 100%;
height: 100px;
background: green;
}
This should size the height of the left container to be everything except 100px and put the green container on the bottom of the whole thing.
div.bottom_container {
width: 100%;
height: 100px;
background: green;
position: absolute;
bottom: 0;
}
div.left_container {
position:absolute;
bottom: 100px;
top: 0;
width: 220px;
background: red;
}
position:fixed;
bottom:0px;
add these two properties in div.bottom_container . hope you are getting what you expect