I have looked for an answer but can't seem to find one. I have a bit of a strange problem, I've never come across it before. Here's a LINK
In my header, I have div id="topHeader" and within this I have div class="contentArea".
topHeader has a float and width of 100%, with background-color, and contentArea has a width of 990px and margin: 0 auto;
Anything that is in the contentArea that has a float, disrupts the contentArea (eg. I want to apply padding to the top and bottom of contentArea but it seems to be only applying to the top and pushing the content down.
Same issue is happening in the footer, contentArea, you can see clearly using Firebug,
Thanks for any replies.
Remove float: left; from all elements with width: 100%;.
Then add <div class="clear"> </div> inside / at the end of all floating elements.
.clear {
clear: both;
}
When you float elements the parent container doesn't wrap around the child elements that are floated in this case you need to add a clearfix like this
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
}
add this to your css then add a class group to any elements that have floated children, this clearfix has full compatibility across all browsers
Not sure if that's what you want, try add this: #topHeader .contentArea {overflow:hidden;}
Related
Situation
html:
<div class="container">
<div class="parent">
<div class="child">x</div>
</div>
</div>
css:
.container {
display: table;
}
.parent {
display: table-cell;
position: relative;
}
.child {
position: absolute;
right: 0;
}
What I expect:
the .child should be positioned to the right edge of .parent. Works in Chrome.
What I get in Firefox:
the .child is positioned to the right edge of the closest "non static" parent which is has not display: table-cell.
Fiddle
http://jsfiddle.net/SYG5k/2
Question
Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?
You need to put position: relative; in your parent.
So in the code in your question add position: relative; to .container
Or in your jsfiddle add position: relative; to .parent
.parent {
height: 150px;
width: 450px;
display: table;
margin-top: 400px;
background: #bbb;
position:relative;
}
Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox
About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).
See this to understand deeper about 'tables' behaviors
http://jsfiddle.net/SYG5k/12
Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element
http://jsfiddle.net/SYG5k/13/
<div class="rel">
a
<div class="absolute">x</div>
</div>
.foo, .rel {
position: relative;
}
This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you
Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above
A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;
HTML:
<div class="parent">
<div class="cell foo">
<div class="cellInner">
a
<div class="absolute">x</div>
</div>
</div>
CSS:
.cellInner{
position:relative;
width:100%;
height:100%;
}
Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/
I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.
This (http://jsfiddle.net/77RRA/1/) is working, while this (http://jsfiddle.net/77RRA/) is not.
Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>?
Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>
Yes. The clearfix is there to avoid a non-semantic empty tag. However, for this to work you need to place it on the parent element. (Example)
In your case however, it does not address the problem that siblings will ignore the floated element. This is not the intend of clearfix, you simply add clear:right (or both as you will) on your #child sibling to restore the normal document flow.
your fixed Example
"Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>?"
No
Imagine you have a container holding several items. If all of those items are floating, the container effectively loses its information of height. So margin-bottoms and background-styles are being displayed wrong. The clearfix solves this problem by adding pseudo-elements before and after the container element + setting a display: table; to stretch it back to its full height.
In your case, you will have to add a clear: both; on #child
In your case , you are trying to clear floatting element from itself (with a pseudo-element that belongs to itself).
Clear should be on elements following floatting elements.
Some other rules can achieve this too.
http://jsfiddle.net/77RRA/6/
#main {
background: lightgreen;
width: 100px;
height: 200px;
}
#one {
float: right;
display: block;
}
#child {
background: red;
width: 100%;
height: 20px;
display:inline-block
}
display:inline-block; will clear this element from floatting elements any sides.
I am trying to have one div on the left side of the page, and one div on the right side of the page.
The code (Code Here) works fine when it's in jsFiddle; however, when I use the same code on my website the "right" div doesn't float to the right, doesn't have a border, and it places itself above the "left" div.
Any ideas?
You have many issues to solve in order to present the web page properly cross-browser, but to give you a solution for the problem at hand, you can see this Fiddle Example!
THE RELEVANT CSS
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
THE RELEVANT HTML
<div class="clearfix">
<div id="right">Right!</div>
<div id="left">Left!</div>
</div>
Explanation:
Wrap the #left and #right into a div that uses the class clearfix to clear the document flow at that specific point.
That should allow the #right and #left to be on their proper place with or without a CSS Reset applied to your web page.
Get a CSS Reset for HTML5: http://html5reset.org/
Read about Floated Elements: CSS Float | CSS float Property
This is my relevant page markup:
<div id="header">
<div id="logo">
Home
</div>
<div id="user_box">
test
</div>
</div>
And my relevant CSS:
#header {
width: 960px;
height: 110px;
}
#logo {
background: url('/assets/img/logo.png') no-repeat center;
width: 300px;
height: 110px;
float: left;
}
#user_box {
width: 300px;
height: 60px;
float: right;
vertical-align: middle;
}
Now, I want to position the user_box div in the vertical middle of the header div. After a lot of Google'ing and experimenting, I have learned that this isn't easy. Apparently, I can't vertical align a block element such as a div. So I'm looking for a different way to do this.
I saw the hacky display: table; method and tried using it, but it didn't change a thing. Also tried changing the element to an inline element like a span, but that didn't work either. I even tried using margin: auto 0; for some god awful reason, and that also didn't work at all.
So I'm asking for help. How do I vertically align this div inside my header div?
Thanks!
Set the line-height of user_box equal to the height of header
Working demo: http://jsfiddle.net/AlienWebguy/pyppD/
vertical align doesn't work with divs its for aligning elements in tables. In your case you could just use this
#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/
So I fiddled around with your code a little bit, and here's what I got: http://jsfiddle.net/3k8XE/
As you can see I'm using a table as the header, and applying the same id to each element, except the two inner divs have changed to td's. I've added an inner td to compensate the space between the two divs since they were originally set to float:left/right.
(Of course the borders are just to show what's actually going on here.)
Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.
First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).
Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.
First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.
Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.
You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.
I use the clearfix class.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/
.clearfix {
display: block;
}
/* End hide from IE-mac */
then just use the class in every floated-element container.
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:
#container { width:200px; overflow: hidden; }
.floated { width:100px; float:left; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
</div>
By the way, you want
div#parent > div { float:left; }
instead of
div#parent div:first-child { float:left; }
which is still not IE6 friendly, but it will float both child DIVs.