I have a HTML section "all" that wraps around two other sections. I'm having trouble getting the website to adjust the height of the "all" section based on the length of stuff I put into the other two sections.
<section id="all">
<section id="left_content">
<p>Something here.</p>
</section>
<section id="right_content">
<p>Something here.</p>
</section>
</section>
I currently have the height set at a fixed size of 700px. I was wondering if it was possible in the CSS, to have that section's height be related to the size of the left_content and right_content sections.
#all {
width: 900px;
height: 700px;
margin: 0 auto;
padding-top: 20px;
background: #F4F4F4;
}
#left_content {
float: left;
width: 570px;
margin-top:-20px;
padding: 0px 20px 10px 20px;
line-height: 25px;
font-size: 12px;
}
#right_content {
border-left:4px solid #cccccc;
float: right;
width: 250px;
padding: 0px 10px 20px 20px;
line-height: 20px;
font-size: 12px;
}
Don't give #all a height
Clear your floats
Your wrapper cannot determine a height while child items are floating. You need an element that "ends" the floating. <div style='clear:both'></div> is a common way to clear floats. Clearfix is another technique.
Read more: http://css-tricks.com/all-about-floats/
Remove the height declaration for #all (like Diodeus said). You will then need to apply either a clearing element below the two content divs (like a footer), or apply a clearfix to the div #all.
For instance:
/* For modern browsers */
#all:before,
#all:after {
content:"";
display:table;
}
#all:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#all {
zoom:1;
}
This is a direct copy & paste of Nicolas Gallagher's excellent micro clearfix.
Related
I'm trying to move the footer down 50px to go outta screen,
but the negative margin doesn't work (nothing is moving) and I'm not quite sure why...
footer {
background: #111;
padding: 50px 0 100px;
text-align: center;
margin-bottom: -50px;
}
Here's an example
body {
background: white;
margin: 0;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<body>
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
</body>
Negative margin is working fine but it's not doing what you are expecting. negative margin-bottom will not make the element to move outside. It will make the parent element to shrink instead.
Here is a simplifed example:
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}
<div class="box">
<div></div>
</div>
As you can see the parent element has a height less than its child due to negative margin and we are having an overflow.
This is what is happening in your case, and since the overflow is by default scroll you will keep seeing the footer. Add some border and you will better see:
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
In order to hide the overflowing part, simply adjust the overflow property and you will have what you want:
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
As you can see, I have added a bigger negative margin to shrink more the body element and to make all the footer outside then I hide it using overflow:hidden
use transform instead of margin
footer {transform: translateY(-50px);}
If I understood your question right, you want a footer to be half hidden from the view.
If so, try to use fixed position, add this to your css:
position: fixed;
bottom: -50px;
If you are using Firefox, try hitting the F12 button for the Web Developer tool.
In the inspector tab you can inspect the element and set the css rules for that element.
Probably you have some kind of conflict with rules declared somewhere else.
You can change live the css for testing in the Web Developer -> Inspector -> Stiles.
For positioning use position and top/bottom/left/right. For example
position: relative;
bottom:50px;
Observed a strange thing with CSS position : absolute in header is that unless there is a float:left in the menu below, the text of the menu is not centered vertically and stays at the top. You can see this by running the snippet given in this page and in full width. I have put a media query for float:none in lower screen width which cancels the float:left in higher screen-widths.
Now, why is this behaviour ? Why is float:left keeping the menu text center vertically when position:absolute is applied to header and vice-versa ? I did not find anything on this on searching.
Edit -
Some answers are saying that this is happening due to "collapsing" of margins. But they are not explaining why the h1 of header is not "collapsing" and behaving this way ? Why only the h1 of menu is "collapsing" ? It seems more of a selecting overlapping of some elements rather than collapsing.
Edit2-
Request the answer givers that if they want to break up the snippet for convenience of their explanations, they should also put in their answer the full snippet or its modification besides the parts of snippet. Because divs do not act in isolation. The answer should have the header with position: absolute, its h1 and the margin-top applied to the h1 of the div below the header.
Please see this snippet -
div.header {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: auto;
text-align: center;
color: #EE82EE;
background-color: #000000;
}
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 72px;
color:black;
height: 100px;
background-color: red;
float: left;
padding:0px;
}
#media screen and (max-width: 766px){
.submenu {
float:none;
}
}
<div class="header">
<h1>HEADER </h1>
</div>
<div class="submenu">
<h1>MENU</h1>
</div>
Edit:
As I explained in my comments, the h1 in your header doesn't collapse because it uses position:absolute - which, as you can see below, is one of the fixes to prevent collapsing margins. The overlapping is only happening because your header is absolutely positioned, so it will appear on top of everything else in the page.
To summarise loosely, collapsing margins happen when vertical margins touch on block elements that have no separation between them (e.g. borders or padding), are not floated, not absolutely positioned, not fixed and have overflow:visible (the default value). There are some other cases but that covers the vast majority causes, including yours.
Answer
What you're seeing is the effect of collapsing margins.
The CSS spec says that when the vertical margins of two elements touch, the two margins will be combined to form a single margin.
This also occurs with parent/child elements when there is no separation between the first (or last) child and the parent - in this case the collapsed margin ends up outside the parent.
In your case, your h1 has a default margin from the browsers stylesheet. This is being collapsed into its parent's margin i.e. the submenu element by default because it is a block element.
Prevent margin collapsing: There are a number of ways to prevent a margin of the child from collapsing including:
float
position: absolute.
change the display to one of: “table-cell”, “table-caption”, or “inline-block".
add an overflow other than visible, e.g. overflow:auto
add a "separation" between the parent and child, e.g. a border or padding.
When you add the float to your child, this is one of the methods that prevent the margins from collapsing, so you still have the space from the margin appearing at the top of your h1 that contains the word "Menu".
See some examples:
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 0px;
color:black;
height: 100px;
background-color: red;
float: none;
padding:0px;
}
.container { border:2px solid #ff0;}
.container:after {
content: "";
display: table;
clear: both;
}
h1{ margin:30px 0;}
.submenu.hasfloat {float: left;}
.submenu.hasoverflow {overflow: auto;}
<p>The top margin of this h1 is collapsed into the parent's margin. </p><p>The parent's top margin is 10px, and the h1 has a top margin of 30px, so when collapsed the parent now takes on the child's margin because it is larger - you can see the margin surrounded with the yellow border:</p>
<div class="container">
<div class="submenu">
<h1>Collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent is <b>floated</b>:</p>
<div class="container">
<div class="submenu hasfloat">
<h1>Not collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent has <b>overflow:auto</b> (i.e. any value other than visible):</p>
<div class="container">
<div class="submenu hasoverflow">
<h1>Not collapsed</h1>
</div>
</div>
Example: Showing that the issue still exists even if the header is not absolutely positioned.
div.header {
position: relative;
left: 0%;
top: 0%;
width: 100%;
height: auto;
text-align: center;
color: #EE82EE;
background-color: #000000;
}
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 72px;
color:black;
height: 100px;
background-color: red;
float: left;
padding:0px;
}
#media screen and (max-width: 766px){
.submenu {
float:none;
}
}
<div class="header">
<h1>HEADER <small>- position:relative</small></h1>
</div>
<div class="submenu">
<h1>MENU <small>- top margin is still collapsing</small></h1>
</div>
References: Read more about collapsing margins from:
Mozilla.org: Mastering margin collapsing
W3.org CSS3 Specification
Sitepoint: Collapsing Margins
CSS Tricks:What You Should Know About Collapsing Margins
The position: absolute applied to the header makes the div FIXED while all other divs become relatively MOVABLE. So, to make the others also fixed, we give them some other properties like display:inline-block, float:left etc.
Also, need to give a margin-top to the div below the absolute div to offset the collapsing margin
Please see working code with these fixes applied and which has all the divs at https://codepen.io/anon/pen/QqRgRB
The snippet is as follows -
div.header {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: auto;
text-align: center;
color: #EE82EE;
background-color: grey;
}
.menu {
text-align: center;
width:100%;
margin:0;
margin-top: 72px;
color:black;
height: 100px;
background-color: red;
float: left;
padding:0px;
display: inline-block;
}
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 0px;
color:black;
height: 100px;
background-color: yellow;
display:inline-block;
padding:0px;
}
#media screen and (max-width: 766px){
.menu {
float:none;
}
}
body {
margin:0px;
}
<div class="header">
<h1>HEADER </h1>
</div>
<div class="menu">
<h1>MENU</h1>
</div>
<div class="submenu">
<h1>SUBMENU</h2>
</div>
I have set a div named header as Absolute so that it is flush to the window.
I then have a content div tag with no position set both are contained in a wrapper div tag
I have set the content div tag to have padding of 100px from top so that contents are not obliterated by the header.
Is there any other way of moving the content under the absolutely positioned header with out the need to use padding or margins?
<div id="wrapper">
<div id="header">
<div id="indent">content of header</div>
</div>
<div id="content">content of page</div>
</div>
CSS
#wrapper {
background-color: #FFF;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 100px;
padding-left: 5px;
clear: both;}
#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
background-color: #FFF;}
#indent {
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}
#content {
clear: both;
padding-top: 100px;}
You could use the "top" attribute:
e.g.
.absolute {
position: absolute;
height:20px;
width: 20px;
background-color: #FF00FF;
}
.relative {
position: relative;
top:20px;
height:20px;
width: 20px;
background-color: green;
}
See this fiddle
You would have to set a top margin for the content div, because when you set the header div's position to absolute the following div's will ignore the height of the header div. So the header div height property would have to be static as well.
You could also just set the html body elements margin and padding to 0px and remove the absolute positioning from the header tag, that would also let the header div sit flush with the window.
Having looked at your code, the below will achieve the same effect, unless there is additional content you arent mentioning. I see your use of clear it would help to also let us know if there are other elements present which may interact with the code you posted.
#wrapper {
background-color: #FFF;
padding: 0px 5px 100px 5px;
}
#header {
background-color: red;
text-align:center;
}
#indent {
display:inline-block;
text-align:left;
/* width : xx */
margin 0 auto;
}
From what I can understand, you will want to use relative positioning, not absolute positioning. If you could make the question easier to understand, I could maybe have a better answer.
As a general rule when you have floated content inside an container, the containing container collapses to it;s minimum height and width, depending on your CSS master rules and the type of container, block, inline-block.
In this cases always add a clear property to one container right after the floated content so it won't break your other content.
<div id="wrapper">
<div id="header">
<div id="indent">content of header</div>
</div>
<div class="clear=box"></div>
<div id="content">content of page</div>
</div>
#wrapper { position:relative; }
#header {
position:absolute;
clear:both; /* add this to clear your content */
}
#content { clear:both; /* in case clear:both from above not working */ }
#clear-box { clear:both; /* a container dedicated to clear contentfloat */ }
Some times you can add one dedicated div to clear floating from previous contents. Be reserved with positioning absolutely. Use default elements behavior unless there is no other way and you're forced to use position:absolute.
Let me know if works for you :)
In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.
I am currently using this CSS:
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
But the full page width isn't filled with this css code.
Any help? Thanks!
I use sticky footer: http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}
<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.
This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.
you could make the footer div absolute to the page like this:
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
I use a few DIV elements for each section of my webpages.
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.
I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.
if you want that your footer be fixed on your page :
.footer{ position:fixed;}
but if you want your footer fixed end of page :
see that
I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
Thanks!
This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.
Use below styling for footer element
In-line style
External style sheet using class attribute in Div
<div class="footer"></div>
style.css
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
External style sheet using id attribute in Div
<div id="divfooter"></div>
style.css
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
You can use this styles in your CSS to achieve your goal
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.
html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
I was facing same issue and solved it with using jquery.
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
}
</script>
What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it.
If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}