I have the page layout with footer still at the bottom of the page. The problem is when I use some divs with content which are FLOAT. If I ommit the float then the content behaves properly and does not overflow the footer.
Please see:
`enter code here`
http://jsfiddle.net/8o7t4wq9/1/
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML:
<div id="container">
<div id="header"></div>
<div id="body">
<div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div>
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div>
</div>
<div id="footer">FOOTER</div>
</div>
#footer {
position:absolute;//remove
bottom:0;//remove
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
clear:both;//add
}
Try to add a parent div to your floated divs and add clearfix to the parent.
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div id="container">
<div id="header"></div>
<div id="body">
<div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
<div class="clearfix">
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">First box of content</div>
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">Second box of content</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
It's hard to pinpoint/see your problem widouth fiddle, but you should probably look at css clearfix
Add css class(clearfix) to containers
.clearfix:after{
content: "";
display:table;
clear:both;
}
for more info and cros browser support look at this thread What is a clearfix?
Remove position:absolute and bottom:0 from footer and add clear:both.
#footer {
width:100%;
height:60px;
background:#6cf;
clear:both;
}
Read More
Related
I have this code:
http://jsfiddle.net/4axkLm9a/
I want the sidebar to appear on the right side of the main content which should stay centered on the page.
I'm trying to design this page so that the main content will be centered on the page, and a sidebar where I can display a vertical banner ad.
Can someone help please? :)
thanks.
Here's the HTML:
<div id="header">
<div id="main">
<div id="inner">
</div>
</div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
And the CSS:
body {
margin:0;
height:100%;
}
#header{
background-color:#f0f0f5;
padding-right:10px;
padding-left:10px;
font-family:Arial,
sans-serif;
font-size:14px
}
#main {
padding-bottom:20px;
margin:0 auto;
max-width:784px;
height:100%;
}
#inner {
border:1px solid #c9c9c9;
padding:20px 20px;
color:#44423c;
background-color:#fff
}
#sidebar {
width:200px;
}
#footer {
background-color:#d3d3d3;
padding-bottom:18px;
padding-top:18px;
margin:0 auto;
max-width:1030px
font:normal 14px/1em Arial, sans-serif;
color:#727272;
text-align:center;
clear: both;
}
Add these to your code. Example Fiddle
#sidebar {
float: right;
}
#inner {
float: left;
width: 584px;
}
Additionally, you should change your code to use semantic html, such as:
<header>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
Also you need to end your #header div before you start the #main div.
Header
<div id="header">Header</div>
<div id="main">
<div id="inner">
Inner Content
</div>
<div id="sidebar">
Sidebar Content
</div>
</div>
<div id="footer">Copyright Website Blah Blah </div>
You can use the position: fixed
On your #sidebar id add:
position: fixed;
right: 0px;
top: 50%;
Fiddle Solution
I'm trying to get a really basic layout using only CSS and divs. What I would like to do is have 3 big divs on the same row and a small div below the first div of the first div in the row. Since I'm trying to set for all of them an height of 400px except for the first one and the small one - which have an heigh of 300px and 100px - I would expect them to show all on the same "line", making a big block. What I get instead is the following:
This is my CSS:
body {
background-color:white;
}
header {
background-color:black;
color:red;
height:10%;
width:100%;
padding:1px;
font-family:verdana;
}
nav {
background-color:#eeeeee;
text-align:center;
height:300px;
width:10%;
float:left;
overflow:hidden;
}
article {
height:100px;
clear:left;
width:10%;
background-color:blue;
overflow:hidden;
}
section {
background-color:yellow;
height:400px;
width:50%;
float:left;
font-style:italic;
overflow:hidden;
}
aside {
background-color:red;
float:left;
width:40%;
height:400px;
overflow:hidden;
}
footer {
background-color:black;
padding:5px;
text-align:center;
color:white;
clear:both;
}
aside img
{
max-width:100%;
max-height:100%;
margin:0 auto;
display:block;
}
And this is my HTML:
<body>
<header>
<h1 align="center"> Welcome to the official website of Almost Free Furniture</h1>
</header>
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
<section>
<p>Please excuse us while we build our new website.</p>
<p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>
<aside id="aside">
</aside>
<footer>
This is a work in progress.<br>
Copyright AlmostFreeFurniture.
</footer>
I'm guessing the problem is in the fact that I want the yellow div to float next to two floating divs, and that may be impossible. Any tips on how to solve this?
I would fix this by wrapping the nav and article elements in a separate element:
.left-column {
width: 10%;
float:left;
}
nav {
background-color:#eee;
text-align:center;
height:300px;
width:100%;
overflow:hidden;
}
article {
height:100px;
width:100%;
background-color:blue;
overflow:hidden;
}
The markup would then become like this:
<div class="left-column">
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
</div>
Why not put a parent around your three elemtns and give it display: inline-block;?
Here is a Codepen for an example of a way to solve your problem: LINK TO CODEPEN
Here is some code too if you prefer to look here:
HTML
Welcome to the official website of Almost Free Furniture
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
</div>
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<section>
<p>Please excuse us while we build our new website.</p>
<p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>
</div>
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<aside id="aside">ANOTHER</aside>
</div>
<footer>
This is a work in progress.<br>
Copyright AlmostFreeFurniture.
</footer>
CSS
header {
background-color:black;
color:red;
height:10%; width:100%;
padding:1px;
font-family:verdana;
}
nav {
background-color:#eeeeee;
text-align:center;
height:300px;
overflow:hidden;
}
article {
height:100px;
background-color:blue;
overflow:hidden;
}
section {
background-color:yellow;
height:400px;
font-style:italic;
overflow:hidden;
}
aside {
background-color:red;
height:400px;
overflow:hidden;
}
footer {
background-color:black;
padding:5px;
text-align:center;
color:white;
}
aside img {
max-width:100%; max-height:100%;
margin:0 auto;
display:block;
}
.inline-div { display: inline-block; width: 33%; }
Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.
Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/
How would I achieve this without using specific widths?
HTML:
<button id="change">Change</button>
<div id="total-wrap">
<div id="hello-wrap" class="bunch">
<div id="box">
<p> Hello, this is text1 </p>
</div>
<div id="box">
<p> Hello, this is text2 </p>
</div>
</div>
<div id="goodbye-wrap" class="bunch">
<div id="box">
<p> Goodbye, this is text1 </p>
</div>
<div id="box">
<p> Goodbye, this is text2 </p>
</div>
</div>
</div>
CSS:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
position:relative;
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
}
.bunch {
position: absolute;
text-align:center;
}
I would do it with left:0; and right:0 as they are absolutely positioned.
DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/
.bunch {
position: absolute;
text-align:center;
left:0;
right:0;
}
Solution:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
text-align:center;
}
.bunch {
text-align:center;
}
<div id="wrap">
<div id="left">Box1</div>
<div id="right">Box2</div>
</div>
#wrap {
background: #e7e7e7;
padding: 40px;
text-align: center;
width: auto;
}
#left, #right {
background: yellow;
display: inline-block;
padding: 20px;
}
Is this what you want?
#box {
position:relative;
display:inline-block;
width:100px;
height:100px;
background-color:yellow;
margin:10px;
}
DEMO: http://jsfiddle.net/p4sA3/11/
The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one
In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/
If you want to use jQuery:
Demo
keepCentered = function() {
$('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
$('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);
I'm not sure what I'm doing wrong but having trouble applying background color for #content. But it works fine if I set the height value to let say 800px. but I want it to be either auto or 100% as this template will be used throughout the site. any advice would be greatly appreciated.
<div class="content_bg">
<div id="content">
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
</div>
</div>
<div class="footer_bg">
<div id="footer">
<div id="footerLeft">
</div>
<div id="footerRight">
</div>
</div>
</div>
/*
====================================================================
Content Area
====================================================================
*/
.content_bg
{
background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
overflow:hidden;
}
#content
{
width:980px;
margin:auto;
height:auto;
background:#fff;
}
#contentLeft
{
float:left;
width:209px;
margin-top:50px;
}
#contentRight
{
float:right;
width:770px;
margin:20px 0 0 0;
}
/*
====================================================================
Footer
====================================================================
*/
.footer_bg
{
background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
clear:both;
}
#footer
{
width:980px;
height:258px;
margin:auto;
background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
}
#footerLeft
{
width:400px;
height:50px;
float:left;
padding: 20px 0 0 25px;
}
#footerRight
{
width:100px;
height:50px;
float:right;
padding: 20px 0 0 0;
}
Set the overflow to auto for #content.
#content {
width:980px;
margin:auto;
height:auto;
background:#fff;
overflow:auto;
}
The problem is that #content has no content. Since you are using height:100% for the div's height, it will expand to the full height of its parent div (i.e. .content_bg). However, .content_bg has no content either; therefore it is expanding to 100% of zero.
Try adding the class to your id <div id="content" class="content_bg"> and erase the class. And give your class these propertis
.content_bg
{
background-color: white;
width: 100%;
height: 100%;
}
Then the content in your id "content" will define the width and height.
You are having a problem applying background to #content because you didn't clear the floats. Add
<div style="clear:both"></div>
After
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
I am new to web design using tableless and I'm having problem positioning some elements on my page..
Here's the sample html: http://christianruado.comuf.com/sample.html alt text http://christianruado.comuf.com/images/screen.jpg
As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.
CSS:
.container {
width:88%;
}
#header {
background:#CCCCCC;
margin-bottom:5px;
padding-bottom:2px;
height:100px;
text-align:center;
}
#content {
background: #0099CC;
margin-bottom:5px;
}
#main {
margin: .5em 0 0 0;
text-align: left;
width:80%;
}
#right {
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
height: 100%;
min-height: 200px;
}
#right .top {
top:0;
display:block;
background-color:#CCCCCC;
}
#right .bottom {
bottom:0;
display:block;
background-color:#FFCCFF;
height:30px;
}
#center {
background:#00FF99;
padding: 5px 0 0 10px;
float:left;
}
#footer {
clear:both;
height:30px;
background-color:#CCFF33;
width:80%;
text-align:left;
}
HTML markup:
<div class="container showgrid">
<div id="header">
<h1>Header</h1>
</div>
<div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
<div id="main">
<div id="center">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Content here</p>
</div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
This is not exactly the answer to your problem, but it should get you on the right track.
Behold! The Holy Grail!
If that doesn't work, another technique you can use is to fake the column. This is done by vertically tiling a background image the width of your column behind where you want your column to be. It's not bad and can work in a pinch.
css :
#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer
{float:left;}
html :
div.header <br>
div.center + div.left <br>
div.footer + div.right
should be like this/