Centering and correct element (div) order - css

Question

Please forgive my lack of design knowledge but I am confused by a bit of div positioning. I have a header div. Within that header I want two divs, one for the logo, and below that another for some content. I have labeled them logo and card respectively. However, when I try to put them both into the html, calling them in proper order, the card div simply lays atop the logo div rather than beneath it. I have tried using pretty much every variation of "clear: xxx" both in the css and inline within the html but they have no effect whatsoever. Can someone explain why this isn't working? Posting relevant css and html below.
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
position:absolute;
top: 3px;
left: 50%;
margin-left: -198px;
}
#header .card {
position: absolute;
left: 50%;
margin-left: -500px;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: left;
}
And the HTML:
<div id="header">
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div>
<div class="card">Some text here</div>
</div>
Any help is greatly appreciated.
Edit: So yes, clearly I am an idiot for trying to use "clear" with no floated elements. I understand that now. So how do I get one division below, rather than on top of, the other?

Answer 1

Get rid of all your absolute positioning. It's rubbish.
http://jsfiddle.net/2BpfF/1/
If you want the .logo DIV to be centered on the page and you know it's width you can do this:
#wrapper {
width: 999px;
margin: 0 auto;
}
#header {
height:416px;
margin-top: 0px;
}
#header .logo {
margin: 0 auto;
width: 333px;
}
#header .card {
background-image: url(http://lorempixel.com/999/367/);
background-repeat: no-repeat;
height: 367px;
}
HTML
<div id="wrapper">
<div id="header">
<div class="logo"><img src="http://lorempixel.com/333/49/" /></div>
<div class="card">Some text here</div>
</div>
</div>
margin: 0 auto; adds 0px margins to the top and bottom of the DIV while calculating the left and right amount for you so it will center. This will only work with a known width.
It seems like you want to center everything. So I would start with a wrapper DIV and center that. I did this with #wrapper.
Remember that source order matters and that by default your .logo DIV will display before your .card DIV without any CSS.
You can also remove the width: 100%; from your #header DIV as all DIVs by default are block level elements. Block level elements always take up the full width of their containing element unless told otherwise.
As for the opacity of the background image I think the best solution would to do this for your image file and not with CSS as I don't think opacity is very versatile yet. What I mean my this is if you set opacity: 0.5; to a DIV, then everything in that div is 50% opaque. I'm not a guru on opacity so you'd have to dig into that a little deeper. But I would just set the opacity in your image editor to 50% and output a PNG file so the alpha(opacity) chanels will be there. JPG files do not have alpha channels for transparency.

Answer 2

You don't have any floated elements, so clear has absolutely no effect.
Absolute positioning removes the element from the document flow, so floating and clearing will have no effects on such positioned elements, since floating adjusts the element within its content flow.

Answer 3

Avoid absolute positioning. Same thing you can achieve using something like this :
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
padding: 5px;
text-align:center;
}
#header .card {
margin-left: auto;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: both;
padding: 5px;
}