/    Sign up×
Community /Pin to ProfileBookmark

Problem with navigation and content divs

Copy linkTweet thisAlerts:
Aug 13.2007

Hello,

Inside my design, I have two divs that handle the left navigation pane, and the central content area.

My problem is that I need the navigation pane to span the entire length of what the content pane may be (it can be any height). I can’t seem to figure out how to do this. No matter what I do (ie, height: 100%) the navigation pane always ends when its own content finishes.

Both the navigation and the content panes are inside a 3rd holder div. Like this:

<div>
<div id=”navigation”></div>
<div id=”content”></div>
</div>

Any advice? ?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@AmberiteauthorAug 13.2007 — Hi Ray,

Thanks for your reply. I actually was already trying this method of having a background image and placing the divs on top of it.

However I'm encountering weird behavior with this. As I said, the two divs are placed inside another div, which has a background image. However, for some reason, even though the navigation div doesn't fill up the entire length of the holder div, it for some reason "hides" the holder div's background image. The only way I've managed to display the background image is by making the holder div's position set to absolute. However, this creates other problems.

Do you have any idea why this is?
Copy linkTweet thisAlerts:
@AmberiteauthorAug 13.2007 — Actually, nevermind, I figured it out ?

Thanks for your help!
Copy linkTweet thisAlerts:
@svidgenAug 13.2007 — Could you show us your solution please?
Copy linkTweet thisAlerts:
@AmberiteauthorAug 13.2007 — Hi svidgen,

I'm not sure how much help this will be for you, because it might be case specific.

In general, I used the technique described in the link Ray gave, where you place your divs on top of a parent div which has a background image, creating the "illusion" of a continuous column.

I was having a problem where the divs on top of the parent div were completely hiding the parent div even though they weren't taking up its entire length. After some playing around I realized that this happened because I didn't set the parent div to be floating. After I put in { clear: left; float: left; } to the parent div, everything displayed correctly.

I say that this might be case specific because my entire layout is based on floating to position elements. I initially forgot to float the parent div which probably caused these issues.
Copy linkTweet thisAlerts:
@CentauriAug 13.2007 — Sounds like your problem was to do with clearing floats. As per the W3C specs, a parent element will not enclose child elements if all of those children are floated, unless the floats are "cleared" - this can be a separate element with clear:both set positioned after the floats but within the container, or it can be done by setting the overflow property of the container. [COLOR="Blue"]overflow:hidden[/COLOR] on the container div may well have fixed your problem also. Floating the container divs also works as a floated parent must enclose floated children, but this can lead to other layout issues.
×

Success!

Help @Amberite spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...