I have this site here.
I want to get the red circle with the cross to be overlayed over the corner area of the content area as depicted in this image.
what would be the best way?
I’m not sure what CSS comment “centers in IE6” you’re talking about
The one in styles.css:
body {
font: 82.5% Verdana, Helvetica; /*Resets 1em to 10px */
[b]text-align: center; /*centers the text in IE6 */[/b]
margin: 0px auto;
background: #fff url(images/bg-top.jpg) repeat-x left top;
}
For that matter the first line is also strange: the original formula was “62.5% turns 1em to 10px”, although it’s also flawed because that’s only true when the user’s default font setting is 16px (mine isn’t, for example, but it seems to be a popular setting). There were a few other weird things in there (auto margins on the body when the body has no set width and isn’t being centered anyway)… is it a template?
…but it seems that declaring left text align for the wrapper div made the image work now in IE7.
Funny thing is, I thought I saw text-align: left on the #wrapper earlier. I had copied your HTML from the site and copied the style.css and put it in <style> tags for some quick and dirty testing. So, I thought I saw text-align: left on the #wrapper (which makes sense with the “center for IE5” idea) so it puzzled me that IE was still centering it.
I’m not sure what CSS comment “centers in IE6” you’re talking about, but it seems that declaring left text align for the wrapper div made the image work now in IE7.
The overflow property is always my first choice when it is feasible.
I gave the conditions (which you omitted when you quoted me) in which overflow:hidden would NOT work.
Ray: when you need an “in-flow” child to be shifted out of a parent that is containing child floats. It simply can’t be done with the overflow property in all cases.
I said in-flow but it applies to positioned elements as well, any child of the overflow parent, as you know.
Yeah I could drag an element into the overflow parent and achieve the same visual effect. If I need text to wrap around the portion that hangs in the parent it ain’t gonna work and I would have to start using sandbags which would call for more useless markup. Especially if the overlapping div was not located at the top.
I’m not completely sure why, but the image (even tho it’s a block, tsk tsk IE!) is getting hit with the text-align: center you’ve got on the body. I dunno if IE thinks #wrapper’s text-align left isn’t good enough, or if the image somehow really isnt’ a child of wrapper?? But the comment in the CSS was “centers text in IE6” which isn’t correct, so simply removing the whole line makes IE work fine.
The text-align: center on the body thing is for IE5 and below, and not for centering text, but for centering blocks (which IE still does incorrectly). So long as you have a good doctype, IE6 will be able to center things the same way all the other elements do, with margin: 0 auto on a width’d block. Then setting it to “left” on the main page container would let IE5 and IE 6 and 7 without a doctype center the main page container without making all the children on the page centered.
well, unless I misterpreted some of what you said, it almost seemed to work. the red cross is now centered in IE but works fine in other browsers.
I moved it back here http://www.chs.apatalk.com/inside.html
#red-cross {
position:relative; /* make sure it depth sorts over border of sibling */
width:44px; height:48px;
margin: 30px 0 -48px 0; /* half the image height */
background: transparent url(images/cross.png) 0 0 no-repeat;
}
#content-wrapper {
clear:both;
background: #f0f0f0;
width:auto;
border:1px solid #ddd;
text-align:left;
margin:30px 0 30px 0;
padding:20px 3px 0 3px;
overflow:hidden;
}
I agree ! Forget enclosing the contentwrapper. Do what deathshadow says ! I saw your example and it seems to be working fine now… 
Boy you guys like to make things more complicated than they need to be.
Put the cross BEFORE the border…
<div class="leadingCross"></div>
<div class="contentWrapper">
and give leadingCross this CSS
.leadingCross {
position:relative; /* make sure it depth sorts over border of sibling */
width:32px;
height:32px;
margin-bottom:-16px; /* half the image height */
background:url(images/cross.png) 0 0 no-repeat;
}
Assuming contentWrapper doesn’t have position set on it (no reason to) you can still use overflow hidden and a haslayout property to wrap floats taking an axe to worrying about any clearfix nonsense. Even if it does, you can then just use z-index to address the sorting.
Rule of thumb, you need that clearfix nonsense with it’s generated content - or resort to absolute positioning on a element that’s top/left - you’re doing it all wrong.
Never ONCE seen a layout that NEEDED that fat bloated non-semantic asshattery.
…and if I did, I’d throw the layout concept away.
thanks so much stomme for taking the time to explain this. it helps alot.
I have one quick question though. I set a height to #content-wrapper because if I don’t the borders and background color for this div will dissapear. I never ever set a height to my content-wrapper but this is the first time I’ve had to do so. Here is the new version so you understand what I mean.
Hi,
You had to set a height because the floated children were not being enclosed/contained. Read through that link Stomme gave above about enclosing child floats.
Normally you can use overflow:hidden; to force the parent to enclose it’s child floats. In your case you can’t use it because your #red-cross div is positioned outside of the #content-wrapper. If you tied to use the overflow property it would clip off the portion that hangs out.
You will need to use an adaption of the clearfix method in this case (it is explained in the float link). When using that method it is important that IE6/7 get “haslayout” tripped on that div in order for those browsers to contain floats in their quirky manner.
Here is the code you need
[B]#content-wrapper[/B] {
clear:both;
background: #f0f0f0;
[COLOR=Blue]width:844px; [/COLOR][COLOR=DarkGreen]/*850px total with padding (IE6/7 haslayout = float containment)*/[/COLOR]
border:1px solid #ddd;
text-align:left;
margin:30px 0 30px 0;
padding:20px [COLOR=Blue]3px[/COLOR] 0 [COLOR=Blue]3px[/COLOR];
position:relative;
}
[B]#content-wrapper:after [/B]{ [COLOR=DarkGreen]/*contain floats without overflow property*/[/COLOR]
clear:both;
content:"";
display:block;
height:0;
font-size:0;
}
SG1:
You’ve got a few little things going on.
First, you’ve made #content-wrapper too big: #wrapper is only 850px wide and you’ve set #content-wrapper a width of 850 and then added 3 px of padding on each side.
You should be able to leave the width off (it will naturally try to fill the width to 850) and then you can have the padding on the sides (or, if you’re trying to trigger Haslayout for IE, then set a width, but one that is 850 - 3 - 3 = 844px).
I would never set a height for a box holding text. The text should never have the ability to spill out: if I am hard-of-sight I may need text-enlarge and then, there goes your text. Leave the height and let the content inside push the box open. If you want the box to always be at least a certain height, min-height is safe to use (IE6 doesn’t understand that one but there’s a way around it and I dunno if you’re writing for IE6 anyway).
For the red cross, I would have that as an HTML image with alt=“” (no alt text but keep the alt attribute) because otherwise if you restrict yourself to background images you will need to have two of them and then the border becomes an issue. If alt=“” then non-visual user agents will not notice it’s there, and this can safely be one of those instances of having decoration in the markup.
…Another possibility is to have an empty div holding the cross as a background instead, which gives you the flexibility of setting whatever image you want with CSS and the image is not in the content. So, that may be a better idea, so let’s try that.
Markup:
<div id="content-wrapper">
<div id="red-cross">[b]</div>[/b]
<div id="content">
<h1>Page Title Goes Here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
If the image will ever have any chance of changing in the future, I would use a different name like “image-container” or something.
In the CSS, set #content-wrapper to position: relative which will make it a positioned box. We will not set any coordinates on it because we only want to take advantage of it being a “positioned ancestor” for our red cross.
#red-cross will be positioned absolutely. This will take it out of the flow: no other elements will see it, and it will only be able to see its positioned ancestor, #content-wrapper.
#red-cross {
position: absolute;
left: a negative number... likely half of the image width will get you close;
top: a negative number... likely half of the image height will get you close;
set width equal to the image;
set height equal to the image;
background: url(theredcrossimage.png) 0 0 no-repeat;
}
Hm, this is assuming that the image has a transparent background, which it may not. If it doesn’t, you can “copy” the background it’s sitting on (the border, the colour difference between Content and #content-wrapper) and nobody will know the difference, plus it’ll be a smaller filesize without alpha transparency and no issues with IE6.
For the issue with the sidebar: you prolly will have to float Content left. Keep the current width, and remove the position: relative cause you shouldn’t need it.
Then float #sidebar left (actually in this case you could also float it right… either way gives the same effect here), and give it a width that will match Content’s width (by matching, I mean, in total they can’t add up to anything larger than 850px). Since you’re adding padding and stuff to these boxes, I suggest you give Content and #sidebar different ugly background colours while you are working with them, like red and yellow. If they never sit side-by-side, set one of them to a ridiculously small width (because then they’ll fit). Or, calculate it out, but be aware IE has some small pixel issues (so I never make my floats exactly fit, I leave some wiggle room) and remember that right now you’re making #content-wrapper too wide by setting a width equal to its container (#wrapper) and then adding more (can’t eat more than 100% of a candy bar, can you?).
With #content-wrapper’s children floating, you’ll need to enclose your floats.
You could give reading the specs a try.
However if their Engrish doesn’t help, the absolute basics are this:
When you have a box, he’s position: static by default (and let’s assume it’s a block element like a div too).
When you say “position: relative” on that box, what you’ve really done is created another box right on top of the original (the specs call this a “generated box”). It holds all the backgrounds, colours, borders, and children your original box had, and the original box becomes invisible. Since the new box is sitting right on top of the old box, you don’t see any difference.
The new box is also higher on the z plane (closer to you) then it was before, and because it’s a “positioned” box, it can haz whatever stated z-index you want to give it.
If you state coordinates on the box, what you’ll see moving around on the page is the generated box. The old original box, however, is still sitting right where it was. This creates what many people call “an unwanted leftover space” which is just the old box still being there. For this reason, most good devs tend not to use relative positioning for moving stuff around… if you move a box around with margins (even a positioned box), then you really are moving the box, the original box (and it’s taking the new box with it).
Position: absolute takes the box out of the flow, and positions it relative to its nearest positioned ancestor. If it doesn’t have one, then it’s positioned from the viewport.
So in this case, your red-cross-holding div, if you set it to
left: -10px;
top: -10px;
that will be red-cross’ top left corner is 10px from the left edge of the positioned container-wrapper, and 10px higher than the top edge of the positioned container.
Huh, that is not what DS said. He was saying that overflow:hidden could be used by restructuring the html (btw,which I agreed was the best option)
At the time of this post the #content-wrapper is still not extending it’s BG-color or borders past the floats in either link provided by the OP.
Lawlz, deathshadow avoids the whole “fizzbin operator frobnicates hoozistatic variables” and just sez it how it iz. : )
Heck, with all that whitespace after #content-wrapper, SG1 can get away with
#content-wrapper:after { /contain floats without overflow property/
clear: both;
content: " ";
display: block;
color: #fff;
}
Just cause in this case, nobody would notice an extra newline.
SG1: Paul O’B’s got a page about floats you may want to read: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
in case you run into any of those IE bugs I mentioned earlier.
I made a visual representation of float clearing and float enclosement that you can just look at in some Modern Browser and in IE7 (7 pages in total I think… it’s missing the “float the container” solution but shows the other popular ways to deal with hangey floats).
Relative positioning is relative to the container and the other position, absolute, is usually not related to the container or to the flow of the document. I do not have enough experience to explain that word “usually” to its fullest extent.
I would say if the sidebar goes to the bottom, make it thinner. Test it all out
in Firebug using Firefox and you do not have to go back and forth from the page to the css. You can see it real time.
I did not see anything at your new link. I am here for the next few days
at least. I will check back in a few hours.
trust me- i did all those things. i am using Firebug and have tried various permutations with it.
I’ve tried just setting the position without any floats. I tried just floating the content and not floating the sidebar. I tried messing with the width of both content and sidebar before you mentioned that too.
I can’t float the content div because that’ll make the cross dissapear. But then the sidebar also drops as well. But if I want the sidebar to appear properly, then I have to float the content div.
I’d be curious to see how this works out
Yes, I agree that is the most feasible way to do it with this layout. 
TBH I didn’t even look at the markup very closely nor was I keeping up with the entire thread.
Rule of thumb, if you need that clearfix nonsense with it’s generated content - or resort to absolute positioning on a element that’s top/left - you’re doing it all wrong.
As you pointed out in this case yes I would agree.
For a “Rule of Thumb” in general, I don’t agree that you can completely throw away the clearfix method as a float containment option. There are plenty of circumstances when you need an “in-flow” child to be shifted out of a parent that is containing child floats. It simply can’t be done with the overflow property in all cases.