I have a few nested divs:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
wrapper style: width: 780px; margin:
20px auto; border: solid black 5px;
header style: position: relative;
min-height: 125px;
body style: position: relative;
content style: position: absolute;
left: 50px; top: 0px;
I have a bunch of html elements in the content div and for some reason the body div and the wrapper div are collapsing around the header and the content div hangs out on its own if I don't set a fixed height for the body div. The only float elements I have are in the header.
EDIT:
If I remove the content div (and drop the html elements directly in body) the body div stops collapsing! Trying to understand why - guess it's due to the position: absolute of the content div.
Any clue why this is happening and how to solve?
I had a look at this question but It doesn't seem to work for me (or maybe I am clearing inthe wrong place...).
You don't really need to use absolute or relative positioning in this case.
The following achieves what you need with a minimal amount of css wrangling.
Colours becuase I like colour, and so should you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 20px auto;
border: solid black 5px;
}
#header {
min-height: 125px;
overflow:hidden;
}
#body {
background-color:red;
}
#content {
margin-left: 50px;
margin-top: 0px;
background-color:pink;
}
.floatie { float:left; width:40px; height :40px;
margin:5px; background-color:#fe0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
</div>
<div id="body">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
Try this. Note: the overflow hidden on the header div solves the need for a clearing div. Note sure why you're using relative+absolute positioning for the content though. That's better handled with margins imho.
<html>
<head>
<title>Layout</title>
<style type="text/css">
#wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
#header { overflow: hidden; background-color: yellow; }
#header div { float: right; border: 2px solid red; }
#body { position: relative; }
#content { position: absolute; left: 50px; top: 0px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div id="body">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
</body>
</html>
I use this style for clearing elements:
.Clear { clear: both; height: 0; overflow: hidden; }
Place a clearing div in the header, to give the header element size:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div class="Clear"></div>
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
Setting the height of the clearing element to zero causes it to take up no space by itself. The overflow style is so that IE will not give it a height eventhough the height is set to zero. IE has a strange idea that every element has to be at least one character high, setting overflow:hidden; keeps the height at zero eventhough the content of the element is one character high in IE.
If you want #content to show up within the border boundaries of #wrapper try this swap on for size, after you remove position:relative from #body (or remove that DIV entirely):
#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}
That way you will be able to see #content show up within the wrapper but beneath #header.
May be happening because there really isn't anything for #content to stick out from under. #header, when it was set to relative, kind of disappears for the below, even if #body was then set to absolute with descendants of it set to relative.
Changing up #content from position:absolute to position:relative will have it come under the previous DIV, which in this case was #header.
Try clearing after your floated elements within the header.
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div style="clear:both;"></div> <!-- Or use a clearfix... -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
As long as the clearing element is within the containing div it should accomplish what you want.
Add style "clear: both" to your div with "body" id. You could also add a div with this style just after "bunch of float divs" and before closing tag of header div.
When you want to clear something you also need to float that element to make it work properly. So you will need.
#header { clear: both; float: left; }
#body { clear: both; float: left; }
I'm not a fan of using "clear:both" if it's not totally needed. A better solution is setting the "overflow" property of the collapsing DIV to "auto".
Try something like:
#header { float: left; overflow: auto; }
Related
So I've two divs positioned next to each other via float left for the left div and float right for the right div. I want my p to appear underneath these two divs. However it just refuses to do that. It always appears at the top of the page or between the two divs. I've already tried setting the two divs to display inline block but then they don't stay next to each other and do a line-break instead. I'm relatively new to HTML and CSS so maybe its just a simple beginners fault but I would be gratefull if someone could help me out.
.p {
background: red;
width: 100%;
}
.tippsboxright {
color: rgb(238, 238, 238);
max-width: 45%;
margin: 0 0 0 5%;
float: right;
font-size: 1.7vw;
padding: 0;
}
.boxleft {
max-width: 50%;
}
<main>
<header>
<h1>My header</h1>
</header>
<div class="content">
<div class="boxleft">
<img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
</div>
<div class="tippsboxright">
<p>
This is the right box with text inside of it.
</p>
</div>
<p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</div>
</main>
You'll want to use CSS flexbox for this instead of float. Put the top divs in a wrapper/container and give the wrapper display: flex. That's basically it, but you can finesse it as I've done in this example:
.wrap {
display: flex;
justify-content: space-between;
}
.wrap div {
width: 100%;
outline: 1px solid red;
}
<div class="wrap">
<div>left</div>
<div>right</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Me non paenitet nullum festiviorem excogitasse ad hoc. Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Inmensae subtilitatis, obscuris et malesuada fames. Fictum, deserunt mollit anim laborum astutumque!</p>
Or, using the html from your example, except I've moved the <p> tag out of the wrapper. Does the <p> have to be in the wrapper div?
.content {
display: flex;
}
<main>
<header>
<h1>My header</h1>
</header>
<div class="content">
<div class="boxleft">
<img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
</div>
<div class="tippsboxright">
<p>
This is the right box with text inside of it.
</p>
</div>
</div>
<p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</main>
There are several ways to get this type of layout, and while floating is the oldest and most common, it's not really designed for this type of thing. float is designed for text to flow around the block, like you see in magazines. So that's what you see happening: your text is flowing around the floats. There is a way to stop this though: clear. Clear tells text to not flow around left, right, or both floated objects. So you can use that to get the layout you desire:
.p {
background: red;
width: 100%;
clear: both;
}
.tippsboxright {
background: lightyellow;
color: rgb(238, 238, 238);
max-width: 45%;
margin: 0 0 0 5%;
float: right;
font-size: 1.7vw;
padding: 0;
}
.boxleft {
background: lightblue;
max-width: 50%;
float: left;
}
<main>
<header>
<h1>My header</h1>
</header>
<div class="content">
<div class="boxleft">
<img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
</div>
<div class="tippsboxright">
<p>
This is the right box with text inside of it.
</p>
</div>
<p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</div>
</main>
It is however better and easier to use either flex box or grid layouts in this case. They are designed for block style layouts, which seems to be what you want, not flowing text around blocks.
I'm trying to nest two child elements in a wrapper which specifies side margins so there's space between its contents and the sides of the screen when the display is narrow and a max-width for when the display is wide.
The second child has some overflow which should be visible while the first child should stay strictly within the wrapper's content box. With the first child removed, the second child behaves as desired. When I add in the first child though, it seems to completely ignore the wrapper's margins, stretching the wrapper's content box and breaking the second child along with it.
Applying overflow: hidden to the wrapper fixes the margin problem but clips the second child. Applying the margins to the first child didn't make it collapse with the parent since it's in a new block formatting context.
The only workaround I've found so far would be to do:
.wrapper {
> * {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
and increase the max-width of the wrapper by 3rem but I was hoping there was some solution that didn't require me to shift the margin from the wrapper to its children.
https://codepen.io/HybridCore/pen/jjoWmd
body {
background-color: #000;
color: #FFF;
display: flex;
justify-content: center;
}
.wrapper {
margin: 0 1.5rem;
max-width: 40rem;
width: 100%;
}
.fit_content_box {
display: flex;
align-items: center;
}
.L {
min-width: 0;
flex: 1 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.R {
margin-left: 1rem;
height: 1rem;
width: 1rem;
background-color: #FFF;
}
.overflow {
display: flex;
justify-content: space-between;
}
.overflow>div {
width: 0;
display: flex;
justify-content: center;
}
<body>
<div class="wrapper">
<div class="fit_content_box">
<p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="R"></div>
</div>
<div class="overflow">
<div>
<p>0</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>24</p>
</div>
</div>
</div>
</body>
You mainly have two issues:
You are setting width:100% to the wrapper and this doesn't account for margin so you will logically have overflow and since the body is a flex container with justify-content:center the margin will overflow equally from both sides that's why you think it's not applied.
You are facing the min-width constraint of flexbox which is forcing you to set width:100% thinking it's the good solution. This same constraint is also preventing the element from shrinking lower than the 100% you specified (related: Why is a flex item limited to parent size?)
To fix this you need to remove width:100% from wrapper and consider min-width:0 instead. You can also remove the min-width applied to .L and you need to consider flex-shrink:0 on .R (or replace its width by min-width)
body {
background-color: #000;
color: #FFF;
display: flex;
justify-content: center;
}
.wrapper {
margin: 0 1.5rem;
max-width: 40rem;
min-width:0;
}
.fit_content_box {
display: flex;
align-items: center;
}
.L {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.R {
margin-left: 1rem;
flex-shrink:0;
height: 1rem;
width: 1rem;
background-color: #FFF;
}
.overflow {
display: flex;
justify-content: space-between;
}
.overflow>div {
width: 0;
display: flex;
justify-content: center;
}
<body>
<div class="wrapper">
<div class="fit_content_box">
<p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="R"></div>
</div>
<div class="overflow">
<div>
<p>0</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>24</p>
</div>
</div>
</div>
</body>
If you want the element to remain at least equal to max-width when there is a small amount of text add flex-grow:1:
body {
background-color: #000;
color: #FFF;
display: flex;
justify-content: center;
}
.wrapper {
margin: 0 1.5rem;
max-width: 40rem;
min-width:0;
flex-grow:1;
}
.fit_content_box {
display: flex;
align-items: center;
}
.L {
flex-grow:1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.R {
margin-left: 1rem;
flex-shrink:0;
height: 1rem;
width: 1rem;
background-color: #FFF;
}
.overflow {
display: flex;
justify-content: space-between;
}
.overflow>div {
width: 0;
display: flex;
justify-content: center;
}
<body>
<div class="wrapper">
<div class="fit_content_box">
<p class="L">Lorem ipsum dolor sit e dolor sit e</p>
<div class="R"></div>
</div>
<div class="overflow">
<div>
<p>0</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>24</p>
</div>
</div>
</div>
</body>
To better illustrate the (1) here is another example with overflowing margin that you can hardly notice:
.container {
width:200px;
margin:auto;
display:flex;
justify-content:center;
}
.box {
height:50px;
width:100%;
background:red;
}
<div class="container">
<div class="box" style="margin:0 5966px">a_long_text_to_avoid_the_shrink</div>
</div>
<div class="container">
<div class="box">a_long_text_to_avoid_the_shrink</div>
</div>
You can see that we have a long text forcing our element to not shrink (the min-width constraint), the element is taking full width and we are centring the content. This will make the margin overflowing like if there is no margin.
If you break one rule then you will see the effect of the margin.
Remove the long text:
.container {
width:200px;
margin:auto;
display:flex;
justify-content:center;
}
.box {
width:100%;
height:50px;
background:red;
}
<div class="container">
<div class="box" style="margin:0 5966px">a long text to avoid the shrink</div>
</div>
<div class="container">
<div class="box">a long text to avoid the shrink</div>
</div>
Remove the centring:
.container {
width:200px;
margin:auto;
display:flex;
}
.box {
width:100%;
height:50px;
background:red;
}
<div class="container">
<div class="box" style="margin:0 5966px">a_long_text_to_avoid_the_shrink</div>
</div>
<div class="container">
<div class="box">a_long_text_to_avoid_the_shrink</div>
</div>
Make a different margin on each side
.container {
width:200px;
margin:auto;
display:flex;
justify-content:center;
}
.box {
width:100%;
height:50px;
background:red;
}
<div class="container">
<div class="box" style="margin:0 500px 0 400px">a_long_text_to_avoid_the_shrink</div>
</div>
<div class="container">
<div class="box">a_long_text_to_avoid_the_shrink</div>
</div>
(2) The white-space is creating the min-width contraint preventing the element from shrinking.
Here is an exmaple to illustrate:
.body {
display: flex;
justify-content: center;
margin: 10px 100px;
border: 2px solid red;
}
.wrapper {
border: 1px solid;
margin: 0 20px;
}
.box {
display:flex;
}
The below is a logical behavior where the text will wrap and the margin are respected
<div class="body">
<div class="wrapper">
<div class="box">
<div>some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
Let's add white-space:nowrap. We add a min-width contraint since we said to the text to never wrap thus our flex element will not shrink and overflow.
<div class="body">
<div class="wrapper">
<div class="box">
<div style="white-space:nowrap">some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
If we add width:100% we force its width to be the same as the container BUT the margin aren't included and are kept outside (the text will logically overflow)
<div class="body">
<div class="wrapper" style="width:100%">
<div class="box">
<div style="white-space:nowrap">some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
Now if we add min-width:0 we remove the constaint of minimum sizing and we can see the margin again even if we keep width:100% because the element will shrink by default
<div class="body">
<div class="wrapper" style="width:100%;min-width:0">
<div class="box">
<div style="white-space:nowrap">some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
The trick is that we are centring the element and applying the same margin on both side which will create the illusion of a collapsing margin but it's a simple overflow of the margin from both sides equally.
Let's change the margin slightly on one side to see a little offset to the other side:
.body {
display: flex;
justify-content: center;
margin: 10px 100px;
border: 2px solid red;
}
.wrapper {
border: 1px solid;
margin: 0 20px 0 40px;
}
.box {
display:flex;
}
The below is a logical behavior where the text will wrap and the margin are respected
<div class="body">
<div class="wrapper">
<div class="box">
<div>some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
Let's add white-space:nowrap. We add a min-width contraint since we said to the text to never wrap thus our flex element will not shrink and overflow.
<div class="body">
<div class="wrapper">
<div class="box">
<div style="white-space:nowrap">some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
If we add width:100% we force its width to be the same as the container BUT the margin aren't included and are kept outside (the text will logically overflow)
<div class="body">
<div class="wrapper" style="width:100%">
<div class="box">
<div style="white-space:nowrap">some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
Now if we add min-width:0 we remove the constaint of minimum sizing and we can see the margin again even if we keep width:100% because the element will shrink by default
<div class="body">
<div class="wrapper" style="width:100%;min-width:0">
<div class="box">
<div style="white-space:nowrap">some long text here some long text here some long text here some long text here</div>
</div>
</div>
</div>
It appears that the source of the problem is white-space: nowrap, which is applied to the content element (.L) inside the first child item (.fit_content_box).
.L {
border: solid 1px #FF0000;
min-width: 0;
flex: 1 0;
overflow: hidden;
white-space: nowrap; <--- trouble maker
text-overflow: ellipsis;
}
If you remove that line of code, your side margins on .wrapper work as expected.
So the key questions are:
Why does the white-space property on a grand-child (.L) collapse the side margins of the grand-parent (.wrapper)?
Why does the white-space property not collapse the side margins when they are applied to the parent (.fit_content_box)?
Why does the overflow property, when applied to the grand-parent (.wrapper), with a value other than visible, allow the margins to hold firm on the grand-child (.L)?
You wrote:
Applying the margins to the first child didn't make it collapse with the parent since it's in a new block formatting context.
Actually, this isn't an issue of conventional margin collapsing, because:
We're talking about horizontal margins, and horizontal margins never collapse, and
We're working inside a flex container, and margins inside a flex container never collapse.
So although a full understanding of the problem may lie in the block (or flex) formatting context, I'm not sure that's why margins on the parent don't collapse.
This is as far as I've gotten on this issue. I'll do more research when I have time. Or maybe somebody else can pick it up from here.
.wrapper {
height:1200px;
width:800px;
overflow: auto;
background:green;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
.sidebar {
background:grey;
position:absolute;
left:10%;
top:0px;
bottom:0px;
width:20%;
height:100%;
float:left;
}
.content {
background:blue;
position:absolute;
left:30%;
right:0px;
top:0px;
bottom:0px;
width:70%;
float:left;
}
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Steven game dev</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
Home
<br>
About
<br>
Blog
<br>
Videos
<br>
Pictures
<br>
Contact
</div>
<div class="content">
</div>
</div>
</body>
</html>
Hi all I'm new so go easy on me. I decided to make up a quick website something I haven't done in years and it turns out I literally forgot everything but I thought it would be easy enough to slide back in. I was wrong for some reason I cant add a background colour to one of my Divs. the div is inside a container div which could be the reason I'm having trouble but I'm fairly sure that shouldn't be an issue having done many times before. The div in question is my sidebar I don't understand why it's being difficult but I've tried many things to remedy it and I cant get it to work. Please excuse the sloppy nature of my css I was just quickly trying to block out the divs so that I could get a visual of what I was doing. Any help would be greatly appreciated I'm sure it's something silly that I have missed but this is basic stuff should be easy.
Seriously, this is a mystery, but I have got it working. Here is the solution:
#sidebar {
height: 100%;
width: 50%;
background-color:orange;
float:left;
}
“But wait”, I hear you say, “that’s the same code!”. Apparently not. Between the width: 50%; and the background-color: orange; is a character which I cannot see, but which stopped the background colour working.
When testing the snippet, I ended up deleting and re-typing the code, which is something I do when I get desperate.
You had whitespace characters before background-color: orange. So the browser thought the name was [whitespace][whitespace]background-color which it doesn't recognize. I know this because I looked at the #sidebar element in devtools and got unrecognized rule: background-color which only makes sense if there was some invisible white-space in that string. Turns out your sloppy css writing was inexcusable!
#sidebar {
height: 100%;
width: 50%;
background: orange;
float:left;
}
#container {
height: 800px;
width: 100%;
float:left;
background-color: grey;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
}
#content {
float: left;
background-color: red;
width:50%;
height:100%;
}
body {
height: 100%;
width: 100%;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
background-color:blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styledesign.css"/>
</head>
<title>
Steven game dev!
</title>
<div id ="container">
<div id ="sidebar">
Home
About
Blog
Videos
Pictures
Contact
</div>
<div id ="content">
<h1>Welcome to my website take a look around </h1>
<p>
I'm a drop out game developer from the University of Abertay Dundee and I've decided to give it another go.
Watch me learn game development along the way as I slowly build my first 3d game using the Unreal Engine 4.
</p>
<p>
Here is some work I have been doing on particles. As you may have noticed the goal was to try and recreate the particles from the Legends of Zeld: Windwaker.
I'm still learning but it's a start the basic principles are there still have to work on the debris that scatters of from the explosion with trails of smoke
following behind using Tails in ue4 particles editor.
</p>
</div>
</div>
</html>
I think you are looking for a sidebar navigation menu try my codes below. And I also recommend the following https://www.w3schools.com/w3css/w3css_sidebar.asp and http://jsfiddle.net/coltrane/cxQGc/.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="sidebar">
Home
<br>
About
<br>
Blog
<br>
Videos
<br>
Pictures
<br>
Contact
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
<style type="text/css">
.sidebar {
background: orange;
position: absolute;
left: 0;
top: 0px;
bottom: 0;
width: 178px;
}
.content {
background: red;
position: absolute;
left: 178px;
right: 0;
top: 0px;
bottom: 0;
}
</style>
This question already has answers here:
How to keep footer at bottom of screen [duplicate]
(6 answers)
Closed 5 years ago.
I am working on a web application and I am trying to keep my footer with text at the very bottom of the page.
I don't want it to move at all, just to always be at the bottom of the page, no matter the size of the page. As of right now, it works great with most browsers, but once I switch to mobile, it moves to the side of the side of the page.
How would I keep it at bottom for mobile as well?
Thanks!
<html>
<body>
<footer>
<div class="container" style="position:absolute; bottom:0px; left:520px;">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
You can use sticky footer located here https://getbootstrap.com/examples/sticky-footer/ or at https://codepen.io/elmahdim/pen/Djlax. In addition you can also use navbar-fixed-bottom
USING STICKY FOOTER GET HERE https://jsfiddle.net/aice09/zy1x2svg/1/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Sticky Footer</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer.css" rel="stylesheet">
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Use the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
sticky-footer.css
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
USING NAVBAR_FIXED_BOTTOM
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Include this in your footer:
position:fixed;
.container
{
bottom: 0px;
position: fixed;
}
In a responsive design, you shouldn't have to set exact pixels for placing elements. In a mobile screen the width is much smaller, and that could be the cause of the footer moving to the side. Rather, something like this should be more appropriate based on your use-case:
<div class="container" style="position:absolute; bottom:0px; text-align:center;">
<p>Thank you and Goodbye</p>
</div>
If the content can be something other than the text here, an automatic margin, margin: auto;, can be useful.
HTML PART:
<html>
<body>
<div id="content">
<div id="main"></div>
</div>
<div id="bottom"></div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
#bottom {
position: relative;
margin-top: -180px;
height: 180px;
clear: both;
}
footer{position:absolute;bottom:0px;}
<html>
<body>
<footer>
<div class="container">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
Guess The question is to fix the footer in bottom. The content size may vary but the footer must be visible always and it should be fixed. Here is the code. Hope it will be usefull. The background color are given just to differentiate sections.
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-12" style="background-color:grey;height:1000px;">Content Here</div>
</div>
<footer>
<div class="col-md-12 container" style="position:fixed; BOTTOM:0px;background-color:red;">
<p class="pull-right">Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
I just stumbled over a very strange behavior with a layout which uses the table-cell css property. I tried the following code in current FF, Safari and Chrome. The behavior is the same everywhere.
My questions is whether someone knows why this happens. Is it a browser bug or a defined behavior? I found this question which has a hint on how to solve the problem, but I would rather like to know why this is happening in the first place. I think other people would also like to know.
Problem: If I comment in the in the second table-cell, everything is fine. If, however the div stays empty the content of the two other cells has something like an "offset-top". This offset has the same dimension as the height of the middle cell. I.e. the content of the outer cells is shifted to the bottom. I added two screenshot div_not_empty.png and div_empty.png.
thanks
Update
I forgot the screenshots. Here they are:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Strange behavior with table-cell formatting</title>
<style type="text/css" media="screen">
#table {
display: table;
background: #efefef;
}
div.cell {
display: table-cell;
}
#c1 div.content {
width: 200px;
}
#c2 {
border-left: 2px solid #ccc;
}
#c2 div.content {
height: 150px;
width: 150px;
background: #aaa;
vertical-align: bottom;
}
#c3 {
width: 200px;
border-left: 2px solid #ccc;
}
</style>
</head>
<body>
<div id="table">
<form id="c1" class="cell">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut.
</div>
</form>
<div id="c2" class="cell">
<div class="content">
<!-- -->
</div>
</div>
<div id="c3" class="cell">
<div class="content">
Dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit.
</div>
</div>
</div>
</body>
</html>
It's got to do with the way that vertical-align: bottom is calculated - see the mdc docs, when applied to table cells, bottom "Aligns the bottom padding edge of the cell with the bottom of the row".
When the table cell has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be).
With a element, there is content to use as the basis for the alignment; without it you'll notice the browsers line the bottom of the element itself up with the bottom of the first line of content in the other elements.
re: the question you link to, using vertical-align: top works because the layout is calculated based on the top of the block elements, not the content they contain.
A simple fix for the issue is to add padding to the .content divs in your stylesheet, which then causes them to render as if they have content, meaning you don't need to have 's in your code when there's nothing to display:
div.content {
height: 150px;
padding-bottom: 1px;
}
Try this and you'll see it behaves as you expect.
So; not really a browser bug, as the browser is trying to calculate the position based on the content (or, bottom of padding) of an element, and the element has no content. Possibly an unintended side-effect of the spec in this case though.
On a related note, your css rule div.cell isn't matching the first 'cell' which is a form element. It's working because all elements inside a display: table element have display: table-cell applied automatically, but not the best.