Jump to content
Stef's Coding Community
Sign in to follow this  
kitster79

Div Wrapper Issue

Recommended Posts

Hi Guys,

 

See this URL....probably just a simple fix...http://vojodesign.com/proofs/harborCare/_root/home01.html

 

I cant seem to figure out how to extend my #wrapper div to the end of the main content area (the white area) and meet with the footer. I have tried placing divs with clear:both values in a couple of places...but I cant quite get it right. It is supposed to look like this...http://globalvisionpr.com/harborCare/home01.html

 

Many thanks in advance...

 

Kit

Share this post


Link to post
Share on other sites

Adding "overflow:auto" to the #wrapper should fix that.

 

... you realize that the way the site is currently coded, users using 1024x768 resolution will have to scroll horizontally to see the whole site?

Share this post


Link to post
Share on other sites

Thanks Ben.

 

Regarding the width issue, yeah I did realize and I dont like it, but I couldn't figure out a way to slice it so that those foliage background images could display. Initially, I had exported one large background image that included both sided of the foliage, but this of course turned out to be about a 170k image...just too big. If you have any recommendations, I would love to hear them:)

 

Thanks

 

Kit

Share this post


Link to post
Share on other sites

Given the choice, a large background image would probably be the way I'd go... did you try a transparent PNG/GIF that would sit on your main background pattern?

 

Otherwise... You could get that effect with tables -- a 100% width table with the center column a fixed width and the two outer columns at 50% width. I believe I did that at one point a while ago, though it isn't the ideal situation and I'm not sure how it would work with browser compatibility.

 

Another option -- though something to experiment with, I don't have the time to test it in depth at the moment -- is to absolutely position both outside the wrapperInner div. Something like:

 

#wrapper { overflow:hidden; }

#wrapperInner { width:960px; position:relative; }

#foliageLeft { position:absolute; left: -127px; ...rest of css... }

#foliageRight { position:absolute; right: -127px; ...rest of css... }

 

I'd need to play with it to figure it out exactly... I played with it in Firebug for a couple minutes though and it does work. The position:absolute takes it out of the document flow and doesn't force the scrollbars to appear. The footer does need to be fixed to avoid scrollbars though. Of course, I haven't tested this on multiple browsers, only Firefox.

Share this post


Link to post
Share on other sites

Looks good. You still have a footer issue when running 1024x768 though -- the footer has a scroll bar and the bear image in the footer is misaligned with the bear image above the footer.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...