Css div is showing inside another div instead of below it!

I have this code :


<div id=wrapper>

<div id=header>
header contents
</div> <!-- end header -->

<div id=body>

<div id=profile>
<div id=avatar>
avatar data goes here
</div> <!-- end avatar -->
<div id=userdata>
user data goes here
</div> <!-- end userdata -->
</div> <!-- end profile -->

</div> <!-- end body -->
<div id=footer>
footer goes here
</div> <!-- end footer -->
</div> <!-- end wrapper -->

I am floatin the avatar div to the left and the userdate div to the right and all seem ok
The problem is the footer div is inside the userdata div and i dont know how and why !
Can anyone please help ??

here is the css part :


#wrapper {
	position:relative;
	padding:10px;
	margin:auto;
	width:900px;
	background-color:#693;
	border:solid thin #060;
}

#header {
	padding:5px;
	margin:auto;
	width:880px;
	height:30px;
	background-color:#9c6;
	border:thin solid #060;
	text-align:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}

#body {
	padding:5px;
	margin:auto;
	margin-bottom:2px;
	margin-top:2px;
	width:880px;
	/*height:300px;*/
	background-color:#9C6;
	border:thin solid #060;
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
}

#profile {
	margin:auto;
	height:300px;
	width:860px;
	border:thin solid #060;
	padding:5px;
}

#avatar {
	float:left;
	margin:0px;
	border:solid thin #060;
	width:300px;
	height:250px;
	padding:5px;
}

#userdata {
	width:530px;
	height:250px;
	margin-left:5px;
	float:right;
	border:thin solid #060;
	padding:5px;
}

#footer {
	padding:5px;
	margin:auto;
	width:880px;
	height:30px;
	background-color:#9c6;
	border:thin solid #060;
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}


So please if anyone find anything wrong please tell me because i am pulling my hair out for 2 days now!
Thanks in advance :slight_smile:

Only showing the html is not enough! That we we have to guess whats going on.

i posted both html and css codes and the problem is the footer div is wrapped by the userdata div instead of being displayed at the bottom of the page outside the body div.

check the screenshot of the issue attached with the post.

Thanks

I miss the css for the footer?

Off Topic:

You should use the code tags for your css as well

Ok i did :slight_smile:

One way to solve it is to float both #body and #footer left

It does no work either!

When i did so , body seems to be out of wrapper div and footer still in the same position!

See the attachment !

Try to add overflow: hidden; to your wrapper, so it wraps around all content


#wrapper {
    position:relative;
    padding:10px;
    margin:auto;
    width:900px;
    background-color:#693;
    border:solid thin #060;
    overflow: hidden; /* Add this */
}

OMG !! , Still no success!

Can you post the page?

What page ?

Can you post a link to your page?

Ok you can try :
http://41.153.166.208/admin.rar

You floated stuff inside #profile. #profile has no non-floated children inside, so it acts like it’s empty. When you have a box with floated children, and you don’t want anyone underneath to ride up, you’ll want to make that container box enclose its floated children.

overflow: hidden on #profile may be the easiest, but remember it also hides overflow, so I’d remove the height.

Since I see #profile has a set height that’s as large as the children, it will look like it encloses its children. It’s a bad idea to set heights on stuff holding content. If I’m a poor-sighted person and I need to enlarge your tiny text, all your little boxes will break as your text spills out of your carefully-heighted boxes. Just let boxes grow to contain their children (which they will if the children aren’t floated) and you’re usually good. Otherwise, if you MUST set a height larger than what you get from the children inside, use min-height.

There are other ways to enclose floats: http://gtwebdev.com/workshop/floats/enclosing-floats.php

donboe was trying both of these with your code (floating containers or overflow: hidden) but I try to keep my floating of containers and overflow as close to the floats as possible. And then often I still need to clear too:

Add clear: both; to the #footer.

As a note: you should be using quote marks around tokens like class and id in your HTML:

<div id=“profile”>

It doesn’t matter if they are single or double, so long as you are consistent.

Also, my operating system doesn’t even support .rar files.

Thanks alot for your help and i already solved the issue , The problem was that i forgot somewhere in the script tp close a <tr> and the <table> tags so the table wrapped the div inside it because it was not properly closed .
Thanks again for your effort i appreciate it so much :slight_smile:

one little thing I’d point out even if you have that problem fixed – your commenting style is likely to trip rendering bugs in IE, and possibly FF 3.5+ especially since you have floats in there.

Comments between floats risks two particularly annoying IE bugs “double render” and “disappearing content”. Their presence can also effect FF which will occasionally treat them as block level elements for Christmas only knows what reason (much as it used to with SCRIPT and NOSCRIPT) … Moving the comment BEFORE the element being closed and stripping unneeded comments avoids these problems.

Also, you’ve got some just plain silly commenting in there.

</div> <!-- end avatar –>

Of course it’s the end, that’s what </div> means! :smiley:

So to avoid having IE issues you might end up pulling your hair out over, I HIGHLY suggest flipping the comments around.

<!-- #avatar –></div>

No rendering bugs… I also like to use the CSS “#” or “.” to say if I’m closing a ID or a class.

Thank you so much for your valuable advice :slight_smile:
I will make sure i will follow it in my future coding , and the reason i am using this commenting system because i got confused with huge pages and i had to know where to start a new div , I know </div> means the end of the div but in my case which div it is , I am just trying to clear things out.

Thanks again and have a good day :slight_smile:

Nothing wrong with the comments, just keep them as small as necessary (as deathshadow said, you don’t need to say “end” if it’s next to a </div> tag), just their placement. Just don’t put the comments after the float, keep them inside it, and you’re cool.

IE6 and 7 are the ones who get hit by this bug, and seems to be related to the same behaviour they do when you mix blocks and inlines together: IE may be treating those comments as inline elements. So far as I know IE8 doesn’t double content. I haven’t seen FF do it but it wouldn’t surprise me.