I am new to CSS and HTML, I have one problem with regard to height of floated elements:
when I set the height of the "content" div to anything more than or equal to the "main" div height, then the margin top of footer is showing correctly, but as soon as I change the height of content div to auto, margin top of footer is not working. I would really like to know is there any solution which makes the content height auto but respects the margin top of footer. Please help me. I've tried everything: clearfixes of every kind, overflow etc.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
Use the overflow:hidden Property .
“overflow: hidden” is often used for the purpose of float containment.
It can do more special things, however: prevent an element's margins
from collapsing with its children and prevent an element from
extending “behind” an adjacent floated element.
Source: The magic of “overflow: hidden”
#content{
width:800px;
height:auto;
background:#999;
overflow:hidden;
}
see jsFiddle
Quick fix...here's a Fiddle
#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}
The problem with your set-up is that when you set the height of #container to auto, its height is actually computed to zero. This is because #container contains purely floated elements, and they are ignored when computing the height of #container.
To fix this, add a clearfix inside #content but after any other content. For example:
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both }
You can see it working here: http://jsfiddle.net/Mzxjs/
Related
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
I need some help, this is bothering me...
I have the following DIV structure:
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
</div>
And the following CSS code to style it:
body, html {
height:100%;
margin:0px;
padding:0px; }
#principal {
width:1000px;
height:100%;
margin:0px auto; }
#colIzquierda {
width:250px;
float:left; }
#colDerecha {
width:750px;
float:right; }
I have a problem when I fill for example #colDerecha with lots of content, and it overflows the height of the windows of my browser, then I can see something like this:
Where the dark grey = #principal, light grey = body, green = #colDerecha.
How can I make #principal gain the same height as #colDerecha always, when #colDerecha content is bigger than the screen size?
I don´t know if I explain myself enough...
Please some ideas? I have tried adding height:100% to both #colIzquierda and #colDerecha, but does not do what I want. It overflows the same, but in other way...
A common approach would be to change the display of the parent element, #principal, to table, then set the display of the children elements to table-cell. In doing so, #colIzquierda and #colDerecha will fill the remaining space.
Example Here
#principal {
width:100%;
height:100%;
background:gray;
display:table;
}
#colIzquierda {
width:25%;
display:table-cell;
}
#colDerecha {
width:75%;
display:table-cell;
background:gold;
}
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
<div style="clear: both;"></div>
</div>
Why use the PHP tag in your question ?
I simply want a div that is absolutely positioned to sit at its current offset top positioning, but im realizing that if any element above it in the DOM is floated (even if that element is inside an element that isnt floated) it will snap to the top of the relative parent. as soon as I remove the above floats the absolutley positioned div snaps to the top. any help is greatly appreciated. here is a fiddle http://jsfiddle.net/hPA3M/2/
Here is my Html:
<div class="parent">
<div class="child1">
<div class="baby1">
<p>Baby</p>
</div>
<div class="baby1">
<p>Baby</p>
</div>
<div class="baby1">
<p>Baby</p>
</div>
</div>
<div class="child2">
</div>
</div>
Here is my css:
.parent {
position:relative;
height:800px;
width:400px;
background:#ff0000;
padding:20px;
}
.child1 {
width:100%;
background-color:#00ff00;
margin-bottom:10px;
}
.baby1 {
background:#e1e1e1;
/*
toggling float on and off has very different effects
*/
float:left;
width:30%;
}
.child2 {
position:absolute;
width:100%;
height:100px;
background-color:#0000ff;
}
Add overflow: hidden for .child1 selector:
.child1 {
width:100%;
background-color:#00ff00;
margin-bottom:10px;
}
Demo
DEMO
When dealing with floating elements is useful to have a clear:both below them.
In this case i addedd <div class="clear"></div> below child1.
CSS for .clear is
.clear {
clear:both;
}
I have a problem with my footer. Darn footer always.
Anyway, it won't show up in the center of the page. I tried using text-align:center & margin:auto but it won't come off the left side.
I'm going to post the code here; maybe you can find the problem?
HTML
<div id="footer">
<div class="footertxtl">
</div>
<div class="footertxtr">
</div>
<div class="designer">
</div>
</div>
CSS
#footer {
background-image:url(images/footer/footer.png);
background-repeat:no-repeat;
text-align:center;
height:223px;
clear:both;
position:relative;
width:100%;}
.footertxtl {
font-size:10px;
text-align:left;
float:left;
padding-left:60px;
padding-top:165px;
height:auto;
width:auto;}
.designer {
font-size:10px;
text-align:center;
padding-top:205px;
height:auto;
width:auto;}
.footertxtr {
text-align:right;
float:right;
font-size:10px;
padding-right:24%;
padding-top:155px;
height:auto;
width:auto;}
Your footer is set to 100% width which means it will always fill the whole width of the body, unless it is contained within another div.
As a result, the footer is 100% width, with one div floating to the left, another to the right, and the other relative.
Give the #footer a fixed width, then give it margin: 0 auto; this will position this div in the center
Can you post a jsfiddle example? If you have a container within your #footer which is not 100% wide, you can use margin:0 auto; to centre it.
If you do not set constant width, then it is set by default to 100%. Your "width: auto" does not behave as you expected. If you do cannot set constant width and you do not mind about IE7, you could do like this:
#footer{
float: left;
display: inline-block;
}
Remember about adding overflow: hidden; to parent div
If you have a wrapper for the rest of the page that set's either a fixed width or a percentage (75%) then stick the footer inside the wrapper
<body style="text-align: center;">
<div id="wrapper" style="text-align: left; width: 80%; margin: 0 auto;">
<div id="Header">............</div>
<div id="MainContent">.......</div>
<div id="Footer">input content here</div>
</div>
</body>
the wrapper will automatically center all of the content
#footer {
background: transparent url(images/footer/footer.png) no-repeat left top;
text-align:center;
height:223px;
clear:both;
}
There is probably a simple answer, but I can't seem to figure it out.
Code:
<body>
<div class='left'>
</div>
<div class='right'>
</div>
</body>
I want .left to be width:100px and .right to be the remaining width of <body>, but for the life of me, I can't get it.
I have:
<style>
.left{
float:left;
width:100px;
}
body{
width:100%;
height:100%;
}
.right{
float:left;
width:85%;
}
</style>
But of course 85% won't fill <body>. Any suggestions? I know it's simple.
.right { margin: 0 0 0 100px; } /* remove the float and width */
This will not work if you have elements inside .right which clear, otherwise it will.