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>
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 2 years ago.
I have
html {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
box-sizing: border-box;
background-color: $bgcolor;
}
.main-content {
height: 95%;
}
header {
background-color: $header-bg;
color: $header-text;
text-align: left;
padding: 20px;
height: 5%;
display: flex;
}
and I have a div with class main-content and a header.
For some weird reason I'm seeing extra whitespace at the bottom of my page. (header has a height of 5% - hence giving main-content height of 95%), any ideas why there's extra space there and how I can remove it??
html is
<body>
<%- include ('../partials/header.ejs') %>
<div class="main-content">
<%- body %>
</div>
</body>
header is -
<header>
<a id="aaa" href="/">AAA</a>
<nav id="topnav">
---
</nav>
</header>
Please try the snippet of code I am sharing with you in this response. I added the height: 100vh; corresponding to the 100% of the viewport height, applied to both html and body to keep the consistency of the height to the max of the screen since they don't have a default size. Also, since it is kind of hard to calculate the max width of any screen and subtract the 20px of padding that you have on the HEADER tag in each screen scenario, an overflow:hidden rule has been added to this element.
I also added the P tag to test the div with the class .main-content with some actual content on it to test the whole site with some real content on it.
I am assuming you are using some JavaScript HTML Markup template generator language tool such as EJS to create this page, hence I have temporarily replaced <%- body %> and <%- include ('../partials/header.ejs') %> blocks with real content to see the end result. Don't forget about placing them back instead of my hard-coded content, please.
I certainly hope this helps. Cheers, champion!
html {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
padding: 0;
}
body {
padding: 0;
margin: 0;
height: 100vh;
min-height: 100%;
color:#b2d8d8;
box-sizing: border-box;
background-color: #004c4c;
overflow: hidden;
}
header {
background-color: #189ad3;
color: #f9fafc;
text-align: left;
height: 5%;
padding: 20px;
display: flex;
width: 100%;
position:relative;
}
.main-content {
height: 100%;
}
p {
padding: 10px;
text-align: justify;
text-justify: inter-word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 BoilerPlate - Alvison Hunter</title>
<meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
<meta name="author" content="https://alvisonhunter.com/">
<link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
<header> <a id="aaa" href="/">AAA</a>
<nav id="topnav"> --- </nav>
</header>
<div class="main-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>
<script src="js/scripts.js"></script>
</body>
</html>
.rightDiv {
position: absolute;
right: 0;
height: 80px;
width: 350px;
}
.content{
width:50%;
position:relative;
margin:auto;
padding:0px;
text-align:center;
top:10px;
}
#spandiv {
display: block;
font-size:16px;
background-color: #232F34;
color:#FFFFFF;
opacity:1;
top:5px;
overflow-wrap: break-word !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="rightDiv">
<input type="text"/>
<div class="content">
<p id="spandiv">10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
</div>
</body>
</html>
I am new to CSS, I want CSS style property that grows the text in both the direction from center of parent element till it reaches end of the screen. I am not familiar with CSS properties, If such a property doesn't exist at all, can I create my own custom style ( I am stuck in my project I want to UI to look as I shown in the description below)
Check this code you have ask like this
Demo
.mainDiv {
height: auto;
width: 100%;
float: left;
text-align: center;
}
.content {
width: 100%;
position: relative;
margin: auto;
padding: 0px;
text-align: center;
top: 10px;
}
.content p {
font-size: 16px;
line-height: 18px;
background-color: #232F34;
color: #FFFFFF;
overflow-wrap: break-word;
padding: 15px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<title>StackOver flow</title>
</head>
<body>
<div class="mainDiv">
<input type="text" />
<div class="content">
<p>10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
</div>
</body>
</html>
Weird request, but follow this; you should create a parent with a ceratin width and height and make the child absolute and give it left: 0 right: 0 to center it inside the parent:
#parent {
width: 500px;
height: 150px;
border: 4px solid;
margin: auto;
}
#child {
text-align: center;
}
<div id="parent"></div>
<div id="child">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.
</div>
.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>
How do I place the button in place shown in the figure using material design?
This is the code on index.html template.
<html>
<head>
{% load staticfiles %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="{% static 'img/book_icon.png' %}">
{% block title %}
<title>Bookstore</title>
{% endblock title %}
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="{% static "css/material.min.css" %}">
<link rel="stylesheet" href="{% static "css/styles.css" %}">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<header class="demo-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Bookstore</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
</div>
</header>
<div class="demo-ribbon"></div>
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<div class="demo-crumbs">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
<!-- <div class="demo-crumbs mdl-color-text--grey-500">
Google > Material Design Lite > How to install MDL
</div> -->
<h3>Welcome to the Bookstore</h3>
<p>Bookstore App example.</p>
<h3>Bem vindo a Livraria</h3>
<p>Exemplo de uma aplicação de uma Livraria.</p>
</div>
</div>
<footer class="demo-footer mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li>Bookstore 2015</li>
</ul>
</div>
</footer>
</main>
</div>
Fork on GitHub
<script src="{% static "js/material.min.js" %}"></script>
</body>
</html>
styles.css
This is the css style for material design.
.demo-ribbon {
width: 100%;
height: 40vh;
background-color: #3F51B5;
background: url(../img/background.jpg) no-repeat center center scroll;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.demo-main {
margin-top: -35vh;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.demo-header .mdl-layout__header-row {
padding-left: 40px;
}
.demo-container {
max-width: 1600px;
width: calc(100% - 16px);
margin: 0 auto;
}
.demo-content {
border-radius: 2px;
padding: 80px 56px;
margin-bottom: 80px;
}
.demo-layout.is-small-screen .demo-content {
padding: 40px 28px;
}
.demo-content h3 {
margin-top: 48px;
}
.demo-footer {
padding-left: 40px;
}
.demo-footer .mdl-mini-footer--link-list a {
font-size: 13px;
}
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.
In the CSS for the card that holds the FAB, put:
position: relative;
overflow: visible;
In the CSS for the FAB, put:
position: absolute;
right: 5px;
top: -25px;
You might have to make some small adjustments for responsiveness (I'm pretty green at web development), but that'll get you started.
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; }