Menu
It appears that all the elements nested inside my parent divs are overflowing from the bottom border of my parental divs.
As you can see the image divs overlay the parent and the paragraph on the header
Similar questions have to deal with floating elements, but this is not the applicable here since I don't use those
Why is "position:relative" ?
Here is the code, and a ready fiddle for your, very much appreciated ,tweaks.
https://jsfiddle.net/r96fxfgj/
<!DOCTYPE html>
<html>
<title>DISSECTIONS</title>
<head>
<link rel="stylesheet" type="text/css" href="dissections.css">
</head>
<body>
<div id="header">
<p><span>/<sup>*</sup></span>DISSECTIONS</p>
</div>
<div id="main">
<div class="photo" id="one"> </div>
<div class="photo" id="two"> </div>
<div class="photo" id="three"> </div>
<div class="photo" id="four"> </div>
<span class="stretch"></span>
</div>
<div id="footer">
<button id="about"> ABOUT </button>
<button id="contact"> CONTACT </button>
</div>
</body>
</html>
body {
overflow: hidden; /*prevents scrolling*/
font-family: courier;
}
div {
width: 98vw;
}
p{
font-size: 8vh;
}
span {
font-size: 15vh;
}
sup {
font-size: 8vh;
}
#header {
border: 2px solid black;
height: 20vh;
padding: 0;
}
#main {
border: 2px solid red;
height: 60vh;
margin-top: 5vh;
margin-bottom: 5vh;
padding: 0;
text-align: justify; /*justify*/
}
.stretch { /*justify*/
width: 100%;
display: inline-block;
}
.photo {
border: 2px solid black;
height: 100%;
display: inline-block;
vertical-align: top;
width: 20vw;
margin-left: 1%;
margin-right: 1%;
background-repeat: no-repeat;
background-image: url(
http://www.publicdomainpictures.net/pictures/10000/nahled/1001-12380278201dXT.jpg);
}
#footer {
border: 2px solid blue;
height: 10vh;
bottom: 0;
}
986
If the parent does have position:relative and doesn't require it you can make it position:unset. True, if it's position: fixed or absolute positioned relative to something outside the parent that has visibility: hidden , it will be visible.
html - div not allowed as child element of button - Stack Overflow. Stack Overflow for Teams – Start collaborating and sharing organizational knowledge.
We can achieve this by setting the overflow property of the full-page-width container div (the full width of the page) to hidden. This will hide the content that overflows to the left and right beyond the full page width and remove our unwanted horizontal scroll.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child. bordersize ).
There are a few separate but similar issues here. Most boil down to you're unintentionally setting a specific height for the parent which is smaller than the things it contains.
In general it's best to set specific heights or widths only when your design actually needs those specific sizes -- otherwise just let the content flow dictate the size of its parents.
text in header overflowing the container: Fonts are a bit weird when it comes to sizing -- the value you put in font-size will match the text itself, but will also scale the padding above and below the text to a (typically) larger value (this is in addition to the normal padding attribute found on other elements). You can fix this by setting values for the text's line-height (a cheap but often-used hack for short headers is line-height:1px, which will remove all the extra padding. Don't use this if there's any chance the text will wrap to a second line, though, or the second line will overlap the first.)
images overflowing #main: you're setting #main as a percentage of the viewport height, but images at 100% of their actual size -- so depending on the window size the images may end up larger than or smaller than the container. Either use the same units for both, or don't set a height on #main at all (therefore letting the images dictate the height of the container.)
position:relative -- I don't see this in your code but I've seen it confuse a lot of people: position:relative counterintuitively doesn't affect the DOM node you attach it to, it affects the absolute-positioned children of that node. If a parent has position:relative, then any children with position:absolute will be placed relative to the parent's position instead of relative to the full window. If you're not using position:absolute (and you shouldn't unless absolutely necessary!) then you don't need position:relative.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
