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;
}
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.
This seems to be a box sizing problem.
Add this snippet to the top of your CSS (I always include it in my CSS reset), so that every element includes its children's padding and borders in its width/height:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If you don't want to apply it to everything, you can apply the styles instead to your .main and .photo classes.
As for your header, the content is overflowing because you have a set height, if you set the height to auto the header height adapts. However if you want to preserve the height of the header, you can change the overflow property to overflow:hidden, which hides overlapping content; or overflow:auto which adds a scroll bar on overflow.
Related
PART 1:
I am trying to make my parent div increase with height as the contents. it is a slide show contained in a parent div and the slide show is responsive. Everything sits fine but 10px padding is not reflected around the main container. Any help?
Example:
.mainer {
width: 100%;
background-color: red;
padding: 10px
}
.slide_wrapper {
width: 60%;
height: inherit;
top: 10px;
border: 0px solid black;
clear: left;
margin: 0 auto;
position: relative;
text-align: center;
}
<div class="mainer">
<div class="slide_wrapper">
<div class="carousel_slider">
<div class="item" style="width:100%;">
<img src="image.jpg" style="width:100%;height:auto" />
</div>
</div>
</div>
</div>
Part 2:
(Bonus for me.)
Assuming that I am also trying to include a different div class="rightbox" to the right of the container class="carousel_slider". Both of them have to stay inside the main container. How can I achieve this? Part 2 is just a curiosity for me.
Any help?.
Thanks and appreciation in Advance.
Michelle
Your problem might be related to using a clear without a clearfix. I'm not entirely sure why you have clear:left to begin with really, you don't have any other floated elements to clear in your html. Anyhow, when you clear an element, it no longer takes up space normally. The item within the cleared element will still take up space, but you can't apply margins and padding normally to a cleared element without clearfix. Here's one you can use easily.
http://nicolasgallagher.com/micro-clearfix-hack/
That being said, clear + clearfix is fairly depreciated and you may find better results elsewhere. Try making .mainer relatively positioned, and absolutely position .slide_wrapper inside of it. That should allow you to set the width to 60% still and align it relative to the top and left of .mainer. Perhaps look into flexbox if you aren't using old versions of internet explorer. I'm not going to explain all of flexbox here as other's have already done it and better, but it allows you to align items intelligently to their parent container and is particularly helpful if you element has siblings.
padding: 10px on the parent is being applied, but you have top: 10px on the img that is pushing it down 10px and messing up the bottom padding of the parent. To increase the space between the top of the image and the parent without messing up the bottom padding of the parent, use padding-top or margin-top instead of top on the img
And to put .rightbox beside of .carousel_slider, make the parent display: flex and it will put those 2 children in adjacent columns in a row.
.mainer {
width: 100%;
background-color: red;
padding: 10px;
}
.slide_wrapper {
height: inherit;
border: 0px solid black;
clear: left;
margin: 0 auto;
position: relative;
text-align: center;
padding-top: 10px;
}
.slide_wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
}
.rightbox {
width: 100px;
height: 100px;
}
<div class="mainer">
<div class="slide_wrapper">
<div class="carousel_slider">
<div class="item" style="width:100%;">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" style="width:100%;height:auto"/>
</div>
</div>
<div class="rightbox">rightbox</div>
</div>
</div>
I need to fix a problem on an existing web page, I need to center elements that have float : left; inside one big <div>. I don't want to remove the floating, and I'm wondering what is the best way to center those elements and make them on two rows.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
Floating makes this weird. Otherwise
.big{
width:150px;
height: 150px;
background: gold;
text-align: center;
}
.a{
display: inline-block;
margin: 5px auto;
width:50px;
height:20px;
text-align: center;
background-color:red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
You may use flexbox.
.big{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: gold;
width: 150px;
height: 150px;
}
.a {
flex: 0 0 35%;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
I do not believe there is a point in floating if you do have no intention of wanting to float to the top and to the left. You need to master the use of both position and display properties. This I believe is what you are looking for. I have put explanations underneath explaining what the relevant display and position properties, as well as why I used what I did.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
position: relative;
left: 12px;
display:inline-block;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
background-color: red;
}
Positioning is how the element is positioned in the document. The options in CSS are either static, relative, absolute, fixed.
Static: This is the browser default. It is not affected by positioning, and will just be positioned in the natural flow of the page.
Relative: Will cause element to be positioned relative to it's initial position. (i.e.: if the element is positioned at X (initial position), then will be moved depending on what properties put in)
Absolute: Will cause element to be positioned relative to next parent element. An important thing to note about this is that elements are removed from the flow of the page meaning that it is possible to have multiple elements stack on top of one another.
Fixed: Will cause element to be fixed relative to the browser window, commonly known as viewport itself. If you scroll down, the position will be fixed, hence the name.
Display
This is how the browser will treat the type of "box"/element that is used (all elements can be considered boxes, as per the box model).If you have trouble grasping the concept, put element {border: solid black} into all your css elements and you'll see what I mean.
There are multiple displays will only get into the 3 of the arguably most important ones: block, inline, inline-block.
Block: element will take up the maximum amount of horizontal space necessary. Think of the li as an example. The list point will take up the maximum amount of horizontal space, and thus each separate li can be considered a block.
Inline: element will take up the minimum amount of horizontal, and vertical space necessary to fit within the flow. Think of the anchor a tag, as it will take up the minimum amount of space necessary to fit within the flow of a paragraph.
Inline-block: Considered an inline value but with the ability to change the width and height of the element.
For your example, I have used the relative positioning element (positioned it right 12px relative to where it originally was) and changed the display to be inline-block, as divs are naturally block elements and thus, without the inline-block display feature, they would have only stacked 1 at a time.
I'm trying to create a page with a fixed div above the main div. The main div should be below the fixed div but instead it overlaps the fixed div.
Adding margin-top positions the main div below the fixed div but, it also clips the same amount off of the bottom of the page.
What am I doing wrong?
Live Demo
body {
background-color: #00FFFF;
}
.fixed {
width: 100%;
position: fixed;
background-color: #C0C0C0;
}
.main {
background-color: #FFFFFF;
}
.expand {
height: 800px;
}
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
To achieve the effect that you're looking for, you can use a combination of display: table on a parent and display: table-row on each of the direct descendants.
Set height: 100% on html, body, .wrap, .main, .inner.
Wrap the current "parents" in a div with class .wrap
Set display: table and width: 100% on .wrap.
Set display: table-row on .fixed, .main
Wrap the text content of .main in a div with class .inner
Set overflow: auto on .inner
This way, no matter what the size of the top div is, the .main will always be underneath .fixed.
display: table is supported by IE > 7 and all other modern browsers.
html, body, .wrap, .main, .inner {
height: 100%;
margin: 0;
}
.wrap {
box-sizing: border-box; /* Include border width in sizing */
border: 8px solid #00FFFF; /* Use a border instead of relying on margins */
display: table;
width: 100%;
}
.fixed, .main {
display: table-row;
}
.inner {
overflow: auto;
}
.expand { height: 800px; }
.fixed { background-color: #C0C0C0; }
<div class="wrap">
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="inner">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
</div>
</div>
You just need to add margin-top to the main div that is equal to the height of the fixed div. For example, if you have a 24px tall fixed div:
#fixed-div {
position: fixed;
height: 24px;
}
#main-div {
margin-top: 24px;
}
Try adding "position: relative" on the top div.
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto; background-color: #C0C0C0; position: relative;">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
You need a top margin on you main div with a value greater then your fixed divs height So if your fixed div is 60px high Make a margin-top:62px for the main div also you could get rid of margin-left and right and do all margins like this margin:60px auto; if the 60px is no good for you on the bottom of the main div you could do margin:60px auto 0px auto;
Hope this helps
--Joshua Joseph Bissot
Have good answer, curtsey of Joshua K.
I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.
That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.
If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.
Can I mark an answer as best answer? If so, how?
Stop the presses;
I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.
I have created another page incorporating the changes needed to accomplish the task. It is at http://thetesting.site/fixeddiv/fixedheader-fixed.html
This question already has answers here:
Impact of border property on top margin
(3 answers)
Closed 7 years ago.
EDIT: found a very good link explaining all about border collapse:
border collapse explained with examples
End of edit. Enjoy :)
I am failing to understand this...
Why applying a 1px solid black border to my div changes the div's size by a lot?
(without the border I can see a relatively thin line as my back ground color, with the border the רectangle of the background color is much wider, see the pictures)
this pic is without applying the border:
and now look at this photo (the only difference is the border...)
can someone explain how the border influences so much on the div size / what is really happening here?!
style:
#header {
background-color: yellow;
color: white;
text-align: center;
border: 1px solid black;
}
here is a fiddle so you can play around:
my fiddle
Thanks a lot,
Jimmy.
That's because of margin collapsing.
The margin is not part of the element iself, it's the distance between the element and surrounding elements, or between the element and containing borders or paddings.
In the first image the margins of your header element (a h1 perhaps?) is collapsing outside the div. The margins doesn't affect the size of the div, instead it pushes the surrounding elements away.
When you add a border to the div, then the margins of the header element will push the border away from the header element instead of pushing surrounding elements away. The margins of the header element determine the size of the div.
The Header size is same, just the background will not fill the area specified as element margin. Your h1 has default margin at top and bottom which is not calculated by browser to be filled. In order to force it you can use overflow: hidden; on Header, an old trick that covers 99% of famous clearfix class (for float fix):
#header {
background: yellow;
overflow: hidden;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
The other way would be to avoid h1 margin and use padding instead, or fixed height:
#header {
background: yellow;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
h1 {
margin: 0;
padding: .8em 0;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
You can add box-sizing to prevent this from happening. Not every browser supports it though.
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
The total size of an element is going to be defined by:
Margin>Border>Padding>Actual element size
Your browser's developer console should allow you to see the value of all of these so try and see which one is changing between those two instances. From the pictures provided it looks like the padding may be changing as you manually adjust the border.
Try manual setting these values:
#header{
border: 1px;
border-color: black;
margin: 0;
padding: 0;
}
Set margin on the h1 tag to 0:
h1 {
margin:0;
}
I updated your fiddle here
Perfect example why sometimes using outline instead of border can solve a lot of headache.
Outlines differ from borders in the following ways:
Outlines do not take up space, they are drawn above the content.
With much respect to all other solutions (which are important to understand), try using the following as an easy fix:
outline: 1px solid black;
instead of
border: 1px solid black;
JSFiddle
Cheers!
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid yellow;
}
Two divs are side by side, one is floating left with a width of 25%, the other just has a width of 75%. But when padding is applied on the right hand div, the padding doesn't work properly.
Here is a JSfiddle example:
http://jsfiddle.net/88upt/
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
CSS
#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}
Can someone explain to me why this is happening?
Thanks
Floating something is kind of like making it's position absolute. It will hover on top of it's neighboring containers. Add a margin-left equal to the width of the floated element to make the container the correct width.
http://jsfiddle.net/88upt/4/
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
margin-left:25%
}
EDIT Elaborating a bit more.
The floated element pushes the content of the sibling elements over. It will not push the left side of the content's element over. The padding is there it's just hidden by the floating element.
Add overflow = "auto" in the #middle.
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}
In this way, you don't need to know the width of floating element.
Width doesn't factor in padding.
Source: http://www.w3schools.com/css/css_boxmodel.asp
The width only applies to content, not padding, border, or margin.
You can find more information here.