i created a main div and split-ted into two css code
#main { background-color:#FFFFFF; width:1000px;}
#left { width:750px; float:left }
#right { width:250px; float:right }
but background color does not changes , when i changed it to
#main { width:1000px;}
#left { background-color:#FFFFFF; width:750px; float:left }
#right { background-color:#000000; width:250px; float:right }
it works but when height changes it looks boring i want to change the background color of whole main div.
what about if your main div gets a
#main {
min-height:100px;
max-height:100px;
}
it needs a height to display background-color
if its not working show the html part please
Without the html this is just a guess, but I think your problem is that the div#main has a height of 0. This happens because the floating divs inside are no longer part of the document flow. Try setting a height on the main div, this should fix it.
Add following rule
#main:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
It will clear floats and make the container as high as the highest column inside.
Related
So I'm trying to design a webpage and was trying to get the footer to stick to the bottom of the page at all times. I did manage to do that with trouble but I figured out where my error was. What I want to know is what is the difference between doing this,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
and doing this,
html,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Why does putting the html part at the top make the footer part of the code work? It doesn't seem to effect any of the other code, just the part that makes the footer stay at the bottom. This isn't my code just the code I got from here I have the same issue in my code though and was just wondering what the deal was cause I can't find anything on this.
http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
Sorry if I wrote this wrong first time posting.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
the absolute position must be relative to another element and in your case the footer is relative to the body. By default the height of body and html isn't 100% to the screen, so if you make your footer absolute to the bottom of body it will be at the bottom of body not the screen so to solve this you made the body height is 100% of the html which must be also 100% to the screen.
you can also use the fixed position instead of absolute, position:fixed will be relative to the screen not to any other element so you footer will be in the bottom even the body and html height isn't 100%
I have a element (represented as aside) that I need to span the full height of the page. However, the height is appearing to be ineffective with "height 100%".
Here is the fiddle: http://jsfiddle.net/h18ctmfq/
aside{
width:300px;
float:left;
background-color:#808080;
height:100%;
}
Add this
html {
height: 100%;
}
JSiddle Demo
What I am trying to do:
Set the <body> tag as display:table and my header/content/footer as display:table-rows. I also want <body> to be the size of the screen, the child elements will show scrollbar if needed.
I do this by setting
body{
display:table;
height:100%
}
This works in chrome, but in firefox the height of the body is the height of the screen. Is this as expected or is this a firefox issue? Is there a way to achieve this while using table? It used to work without table, but I need the footer to not appear on occasion, so I need my content to grow as needed, and it seems to work nicely in chrome.
You can see this on my (alpha) site at sportmenow.com
I've provided two solutions below, the first is more structured, the second follows your design pattern.
Demo Fiddle
Why not implement more structured HTML which follows a more semantically correct pattern and structure of table->row->cell:
<header>
<section></section>
</header>
<article>
<section></section>
</article>
<footer>
<section></section>
</footer>
CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
section {
display:table-cell;
width:100%;
}
section:nth-child(2) {
height:100%;
}
However.. If you dont care about this so much, you can simply use display:table on your body element and then the below- the limitation being that each section will collapse unless it has content (even only nbsp;)
Demo Fiddle
HTML
<header>headerContent</header>
<article>mainContent</article>
<footer>footerContent</footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
You can specify the height of a display:table element in firefox. However, to use the full browser window, you may have to specify the height of the html element too:
html { height:100%; }
fiddle
Following this bug report, https://bugzilla.mozilla.org/show_bug.cgi?id=26617#c14, it seems when the element is using display: table-row, Firefox treat height as min-height, that's why you only found problem in Firefox.
On the other hand, if you already know the height of your header / footer before hand, you could use position: fixed with fix value in top and bottom attribute to layout your page instead.
In short, please try replace your CSS on your .body and .footer like this.
.body {
display: block;
position: fixed;
width: 100%;
top: 60px;
bottom: 92px;
padding: 6px;
}
.footer {
display: block;
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
text-align: center;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
This will work consistently on both Firefox and Chrome.
However, when you hide your footer, you will need to use javascript to update CSS attribute "bottom" to 0 on your .body element.
$('.body').css({'bottom':'0'});
To set any element to 100% of its parent's height, the parent element must have a defined, non-percentage height (px, em, etc.), or it an all ancestor elements must be 100% height. For example, if your element was the first child of the body, you could set it to 100% height with the following CSS:
html, body, #my_element {
height: 100%;
}
If you were to set a parent to a specific height, then the target element to 100%, the target element would be that height as well. Imagine you had an element with an ID of element_parent, that contained your target element:
#element_parent {
height: 500px;
}
#my_element {
height: 100%;
}
In the above example would mean that my_element would expand to the full 500px that its parent is set to.
I have a problem making a 3 column layout. I have tried all examples now online - used Google. None of this seems to solve my problem.
What I try to do is easy for people with knowledge.
Make a 3 column fluid layout that cover the whole screen.
Left column should be 230px width, fixed, height 100%.
Center column and right column should be equal width.
For both center - and right column they have to "float" into each other
Problem occur when you zoom out. Center column run away to left and make a huge white gap between center column and right column.
That is my problem.
center and right column need to be close to each other - no gap.
How can I solve this?
You can see my attempt here: Fiddle
Just zoom out, and you see the problem straight away. Need help to fix this. How?
Another problem occur if I use a div wrapper inside the center column with width set to 100%. Same problem as described above will happened. The text in both left and right column need to be float as well.
I can't use overflow:hidden because I need to - later - use a absolute div on right side of the center column to set a image arrow pointing to right column.
You mean something more like this: http://jsfiddle.net/gbRzM/?
(uses left, right and width properties to position everything)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.right {
right:0;
width:30%;
position:fixed;
background: RED;
}
.center {
left:230px;
right:30%;
position:fixed;
border:1px solid;
background:YELLOW;
}
Or more accurately this: http://jsfiddle.net/HKJvP/?
(puts center and right in a new div, so that pixels and % can be mixed, allows equal width that you specified)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.notleft{
left:230px;
height:100%;
right:0;
position:fixed;
}
.right {
right:0;
width:50%;
position:absolute;
background: RED;
}
.center {
left:0;
width:50%;
position:absolute;
border:1px solid;
background:YELLOW;
}
give a fixed width to the parent element of three columns and add class clearfix
``
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.
how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?
the height:100% seems to be measuring the screen height but not the content inside of it.
<style>
#container{
height:100%;
width:100px;
border:1px solid black;
}
</style>
<div id="container">
link to problem sample page
Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they're not needed, and try this in your CSS:
#container:before, #container:after {
display: table;
content: "";
zoom: 1;
}
#container:after {
clear: both;
}
absolutely positioned elements do not change the height of their container. Your farbartastic element has absolute positioning, so it will be laid out without informing its container of its height requirements.
You have some problems with yours floating element (which are flying outside the container), so , for correct this use overflow:hidden in the container
#container{
width:100px;
border:1px solid black;
overflow: hidden;
}