6 Replies - 3553 Views - Last Post: 26 January 2011 - 04:25 PM

#1 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Floating divs inside other divs layout issue

Posted 10 May 2010 - 07:08 AM

Hey guys,

I am having a issue with basic positioning, it seems like it should be easy but I have been looking at it for over and hour : - /. Here is what I want to do: I have a main div that acts like a wrapper. Inside that I have a variable number of divs, called program_groups,(they will be created based on the results from a database) the divs will be of variable height as they will be populated from a database. All I want to do is have the divs sit next to each other, so I floated them left, the problem is because they are of different heights they will get bunched up, that is two of these divs fitting into a space that should be for one because the two are particularly short. I can fix this by assigning a height value to the program_group class but that makes a bunch of the divs have lots of white space because there is not that much content in them. Here is what it looks like in code:

<div id = 'wrapper'>
  <div class = 'program_group'>
   <!-- content filled from database -->
  </div>
  <div class = 'program_group'>
   <!-- content filled from database -->

  </div>
  <div class = 'program_group'>
   <!-- content filled from database -->

  </div>
  <div class = 'program_group'>
   <!-- content filled from database -->

  </div>
</div>



Again, there is a variable number of the program_group divs created. Here is what I have done for the css:
#wrapper{width:600px;margin:auto;}
.program_group{width:200px;height:300px;float:left;}



Could anyone offer a suggestion as a way to have this work without having to specify a height for the program_group class and not have it "bunch up"? Thanks much it is appreciated.

Is This A Good Question/Topic? 1
  • +

Replies To: Floating divs inside other divs layout issue

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Floating divs inside other divs layout issue

Posted 10 May 2010 - 07:15 AM

Do you have a link to a working example of this, so I can visually see what the problem is,

I think you may need to use the clear:both css property after each div or equal height columns ? http://www.ejeliot.com/blog/61

This post has been edited by revolutionx: 10 May 2010 - 07:18 AM

Was This Post Helpful? 0
  • +
  • -

#3 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Floating divs inside other divs layout issue

Posted 10 May 2010 - 07:42 AM

View Postrevolutionx, on 10 May 2010 - 06:15 AM, said:

Do you have a link to a working example of this, so I can visually see what the problem is,

I think you may need to use the clear:both css property after each div or equal height columns ? http://www.ejeliot.com/blog/61



Hi,

Unfortunately no I don't have a link as this is being done in PHP on my local web server and I don't have anything readily set up that will serve PHP : - (. The idea is I want the divs to be next to one another, that is why I am floating them. I would like them to be side by side in rows, but because they are different heights sometimes two of the smaller divs will be floated in one row, that is what I mean by "bunched up". I tried creating a clear div (a div with the clear:both) after each program_group but that just made them stack vertically on top of one another. Giving the divs a height property makes things ugly because some of the divs will only have 2 items while others will have a dozen, the ones with 2 would have a bunch of white space in them.

Thank you for your response, I appreciate it, I know it is difficult to visualize what I am trying to do and regret that I cannot provide a link.
Was This Post Helpful? 0
  • +
  • -

#4 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Floating divs inside other divs layout issue

Posted 20 May 2010 - 02:37 PM

Why not try setting the row div's height to 100%?
Was This Post Helpful? 0
  • +
  • -

#5 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: Floating divs inside other divs layout issue

Posted 21 May 2010 - 03:07 AM

So are you wanting them to go similar to this?

| DIV || D I V ||DIV|

If that is the case, try playing around with the margins.


I've just had a play around with it, so have a look at the following code (use it yourself, since I cannot access my own site from my current location).
<html>
<head>
<style type="text/css">
.div { height:auto; margin:0; float:left; border:1px solid red; }
</style>
</head>


<body>
<div style="width:100px; border:1px solid blue;">
	<div class="div">div<br />div</div><div class="div">div</div>
	<div class="div">div WEOW<br /><br />ok</div>
	<div class="div">divvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
</div>
</body>

</html>

Was This Post Helpful? 0
  • +
  • -

#6 Guest_Stephen Akins*


Reputation:

Re: Floating divs inside other divs layout issue

Posted 26 January 2011 - 12:33 PM

View PostJstall, on 10 May 2010 - 07:08 AM, said:

Hey guys,

I am having a issue with basic positioning, it seems like it should be easy but I have been looking at it for over and hour : - /. Here is what I want to do: I have a main div that acts like a wrapper. Inside that I have a variable number of divs, called program_groups,(they will be created based on the results from a database) the divs will be of variable height as they will be populated from a database. All I want to do is have the divs sit next to each other, so I floated them left, the problem is because they are of different heights they will get bunched up, that is two of these divs fitting into a space that should be for one because the two are particularly short. I can fix this by assigning a height value to the program_group class but that makes a bunch of the divs have lots of white space because there is not that much content in them. Here is what it looks like in code:

<div id = 'wrapper'>
  <div class = 'program_group'>
   <!-- content filled from database -->
  </div>
  <div class = 'program_group'>
   <!-- content filled from database -->

  </div>
  <div class = 'program_group'>
   <!-- content filled from database -->

  </div>
  <div class = 'program_group'>
   <!-- content filled from database -->

  </div>
</div>



Again, there is a variable number of the program_group divs created. Here is what I have done for the css:
#wrapper{width:600px;margin:auto;}
.program_group{width:200px;height:300px;float:left;}



Could anyone offer a suggestion as a way to have this work without having to specify a height for the program_group class and not have it "bunch up"? Thanks much it is appreciated.


Yes: You can use Javascript to examine each DIV in each row, check to see which one is the tallest, and assign that height to each of the DIVs (in that row).

Here is the solution using Javascript (actually jQuery specifically, so you'll have to include jQuery for my code to work. It will work with your DIVs:

    $(document).ready(function() {
    
    var currentTallest = 0;
    var currentRowStart = 0;
    var rowDivs = new Array();
    
    $('div#wrapper > div').each(function(index) {
    
        if(currentRowStart != $(this).position().top) {
    
            // we just came to a new row.  Set all the heights on the completed row
            for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
    
            // set the variables for the new row
            rowDivs.length = 0; // empty the array
            currentRowStart = $(this).position().top;
            currentTallest = $(this).height();
            rowDivs.push($(this));
    
        } else {
    
            // another div on the current row.  Add it to the list and check if it's taller
            rowDivs.push($(this));
            currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);
    
        }
        // do the last row
        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
    
    });
    });


If you want more details, you can read further about the solution on my blog, here:
http://stephenakins....quid-css-p.html

This post has been edited by macosxnerd101: 26 January 2011 - 01:06 PM
Reason for edit:: Please use code tags

Was This Post Helpful? 0

#7 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Floating divs inside other divs layout issue

Posted 26 January 2011 - 04:25 PM

All that work for a year old thread. **sigh**
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1