Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member PixelFool's Avatar
    Join Date
    Feb 2004
    Location
    Rochester, NY
    Posts
    30
    Member #
    4871
    Hello all

    I have one container div, and 4 inner divs in rows. There is no overlapping, and the top div has an image that I want everything else to resize to, essentially. My problem is that, even with endless tweaking, I can't seem to get all of the divs to be 100% width.

    Is there any little trick to making inner divs 100%?

    Thanks!
    http://www.pixellatedfool.com

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    link? You probably have an error in your CSS.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    errrrr.... width: 100%

    seriously... it's kinda hard when we don't have a link or some code
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I think the problem that PixelFool's having is that (s)he wants all of the divs inside the container div to resize to the parent div. I myself have had a lot of problems with div sizing in the past. It's really a pain in the ***... sometimes it will size relative to the parent div and sometimes relative to the whole window! To make matters worse, IE and NS treat absolute and relative positioning of divs differently. It's really a matter of trial and error... you have to play with it until it does what you want in every browser.

    Personally, I suggest that you use tables. They work perfectly for what you're trying to do.

  6. #5
    Senior Member gabe89's Avatar
    Join Date
    Oct 2003
    Posts
    137
    Member #
    3412
    It seems likely that your problem lies with the parent div's padding properties. But it would definately help to see an example or your code.

  7. #6
    Member PixelFool's Avatar
    Join Date
    Feb 2004
    Location
    Rochester, NY
    Posts
    30
    Member #
    4871
    Thanks guys, I was trying not to be too long-winded by posting a code.

    I did get it working actually, like Transio said, with lots of tweaking. I ended up putting one of the divs inside another and... it worked. I didn't see any logic in it.

    Here's a link to the page if anyone wants to see what happened, or give any tips on what could be better.
    http://www.pixellatedfool.com/ask/main5.htm

    Thanks for all the replies!
    http://www.pixellatedfool.com

  8. #7
    Member
    Join Date
    Jan 2004
    Posts
    94
    Member #
    4729
    divs default to 100% width?

  9. #8
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Glad you got it worked out..

    ..but dont see where you were having your problem..

    Your markup shows one 'container div' and three main divs inside of it. (top, main, footer)

    Also as flump stated, divs 'default' to the full width of their containers. So if one were to stretch past its normal width it would aslo streatch its container witch would in turn streatch the rest of the divs accordenly, unless you set their widths to a value.

    I took the liberty of looking at your css. Right now your site is working haphazardly because you found a way to make it look the way you want, and there is no problem with that if it works the way you want it to work. However if you want to get it to work 'cleanly' you need to make some minor adjustments..

    CONTAINER width property value sould be changed from 50% to 660px.
    TOP and FOOTER width properties should be taken out completly. (100% is redundant in this case)
    NAVCONTAINER UL width property value should be changed from 657px to 100% (UL's do not default to 100% width so you need to add it)

    You could also take this a step farther to properly center your layout with css. Take out text-align: center from your body element and add this to the content element instead. (your width has to be set to 660px for this to work)

    Code:
    position: relative;
    left: 50%;
    margin-left -330px
    This puts the left edge of your content div in the middle of its parent (body) then backs it up half the width of itself so it will always be centered.

    Good site just thought I would point some things out in case you might be interested..


  10. #9
    Member PixelFool's Avatar
    Join Date
    Feb 2004
    Location
    Rochester, NY
    Posts
    30
    Member #
    4871
    Hey, thanks a lot glyakk -

    That actually mostly worked - I ended up taking one of those divs back out of the other one (so there were 4 in the container), had to take the "float:left" property off of the navcontainer ul div, took away the "margin-left: -330px" of the container and changed the "left:50%" to about 20% and it's perfect.
    I definitely wouldn't have gotten the div widths worked out without your help.
    Thanks a ton!
    http://www.pixellatedfool.com

  11. #10
    Member PixelFool's Avatar
    Join Date
    Feb 2004
    Location
    Rochester, NY
    Posts
    30
    Member #
    4871
    Just a final note for anyone who might have been watching the thread, the new page is at : www.pixellatedfool.com/ask/main.html and the stylesheet is at www.pixellatedfool.com/ask/askstyle.css , though they won't be up there for more than another week.

    Thanks for the help guys-
    http://www.pixellatedfool.com


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com