3 replies [Last post]
Sparhauoc
Sparhauoc's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-4
Joined: 2012-11-04
Posts: 2
Points: 3

Hello all!

I have been doing web design now for about a year and this is the first time I have had a question that I have not found already answered in a forum or book somewhere, so it would really make my day if you all could help me out Smile

I'm trying to have a parent div, with content, and a child div below it with content and not have the two running on top of each other. Here is visual of my goal:

***************************
* |Parent Div| *
* *
* content content content *
* content content content *
* content content content *
* ********************* *
* * |Child Div| * *
* * * *
* * different content * *
* * different content * *
* ********************* *
***************************

I can get the child div at the bottom using CSS:

#childdiv
{
    bottom:0;
}

The problem is no matter what I try, the parent div's content runs into the child's!

So I have this:

***************************
* |Parent Div| *
* *
* content content content *
* content content content *
* content content content *
* ********************* *
* *con|ehtlcoDtventcon* *
* *dciofnftentatnlwrwe* *
* *dciofnftentatnlwrwe* *
* *dciofnftentatnlwrwe* *
* ********************* *
***************************

Additional info: I can't use fixed height, or else I know a workaround that would have helped >.<

Here is the html:

<div id="parentdiv">
<div id="childdiv"">
<p>Archives</p>
<a href="oldblog.html">Old Blog</a>
<a href="oldblog.html">Old Blog</a>
</div>
<p> My content</p>
</div>

I have tried "clear: both;", setting margins, padding, and now I really don't know what else to try. Any help would be greatly apprecaited!
PS

I didn't post all the code because most of it is not essential.

Thanks again for any help!

Sparhauoc
Sparhauoc's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-4
Joined: 2012-11-04
Posts: 2
Points: 3

NOTE: I realized I hit the

NOTE:
I realized I hit the quotation button twice by accident in the html code, but I can't find a way to edit the original post.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You don't show it, but I'll

You don't show it, but I'll guess you're using {position: absolute;}. Absolute and fixed position elements are invisible to other elements, and vice versa.

The html you showed us will naturally have the child div precede the parent's other content. Put the parent's other content ahead of the child div you want living at the bottom of the parent.

If that's not what you want, you need to show us more than you have.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: I didn't post all the

Quote:

I didn't post all the code because most of it is not essential.

Yet as seen Gary had to guess at the situation, thus sadly you did not post all the code that was necessary Wink Please observe posting guidelines; posting pertinent code is ok as long as one does actually definitely know what that code is, in this case it was ALL the css that related to those elements shown.

The snippet of CSS you do show actually does nothing in this context; stating simply 'bottom: 0;' in a ruleset has absolutely no effect on the element that has that selector appended to - unless that element has properties applied from another ruleset elsewhere in the stylesheet.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me