Jump to content

Div Wrapper Issue


kitster79

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

Link to comment
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

Link to comment
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.

Link to comment
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...
×
×
  • Create New...