SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast amboy00's Avatar
    Join Date
    Jun 2006
    Location
    Dallas, TX
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Force Justify Div Widths

    I have run into a programming callenge.

    My master div with auto size with the window.
    The child divs inside have a minimum size of 165px and sit next to each other (float: left).

    I want the divs to stretch to the full width of the master div. For example
    I can fit 4 child divs into a master div that is 660px wide. If I stretch the master div to 700px, the four divs stretch by ten pixels. However, if an extra child div can fit, like if the master div were to stretch to 825px, then the childs div would be set to 165px thus fitting 5 child divs per row.

    Any ideas?
    --chris

  2. #2
    SitePoint Enthusiast amboy00's Avatar
    Join Date
    Jun 2006
    Location
    Dallas, TX
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I have figured this out. I can make a single div behave properly, but I can't get all the divs with the same ID to do the same thing.

    It might not be the best code, but works for the single div:
    Code:
    var bookElement = document.getElementById('book');
    var bookSpacing = (wallWidth % 165)/(parseInt(wallWidth/165)) + 165;
    if (bookSpacing != 165 || 0) {
    	bookElement.style.width = bookSpacing + 'px';
    }
    else {
    	bookElement.style.width = 165 + 'px';
    }
    What is wrong with my code when I try this?

    Code:
    var bookElement = document.getElementById('book');
    var bookSpacing = (wallWidth % 165)/(parseInt(wallWidth/165)) + 165;
    if (bookSpacing != 165 || 0) {
    	for (i=0;i<bookElement.length;i++); {
    		bookElement[i].style.width = bookSpacing + 'px';
    	}
    }
    else {
    	for (i=0;i<bookElement.length;i++); {
    		bookElement[i].style.width = 165 + 'px';
    	}
    }
    --chris

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var bookElement = document.getElementById('book');
    bookElement[i]...

    Which bookElement, there has to be just one unique id.

    try
    Code:
    var bookElement = document.getElementById('book');
    var whattoresize = bookElement.getElementBytagName('p')// example 
    for (i=0;i<whattoresize.length;i++) {
    		whattoresize[i].style.width = 165 + 'px';
    }
    ---------------------------------
    or
    Code:
    var whattoresize = bookElement.childNodes// example 2
    for (i=0;i<whattoresize.length;i++) {
    if (whattoresize[i].nodeType == 1) { 	
    	whattoresize[i].style.width = 165 + 'px';
    }

  4. #4
    SitePoint Enthusiast amboy00's Avatar
    Join Date
    Jun 2006
    Location
    Dallas, TX
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that something to use on IE? Both of those examples break on Safari and Firefox.

    Do the id's have to all be unique? is there a way to reach every div with the same id?
    --chris


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •