SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fit floating div's with different heights ?

    Hi all

    I have a simple demo here to illustrate my problem.

    http://www.ttmt.org.uk/forum/index.html

    It's a responsive layout of div's that are floated to create 3 columns.

    The div's have different heights so when a div comes after a div that is taller
    it is pushed down on the next column Eg. Header3 and Header4.

    Is it possible to have div's with different heights fit together.

    I have am image here to illustrate the desired layout. The order of the div's
    doesn't matter as long as they fit together.

    http://www.ttmt.org.uk/forum/1.png

    Thanks in advance for ant help.

    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
    
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
    
        body{
        	font:10px 'Source Sans Pro', sans-serif;
        	font-size:100%;
        	font-size:1.02em;
        	color:#555;
        }
        #pageWrap{
        	max-width:1135px;
        	margin:0 auto;
        	border-left:40px solid white;
        	border-right:40px solid white;
        }
    
        /*---------------------
        	sec-sevice
        ----------------------*/	
        #sec-service{
        	padding:0 0 230px 3.52422907488987%;
        	margin:30px 0 0 0;
        }
    
        #sec-service .service{
        	float:left;
        	width:29.68036529680365%;
        	background:#ccc;
        	margin:0 3.65296803652968% 6px 0;
        }
        .service h3{
        	font-weight:700;
        	font-size:1.1em;
        	padding:10px 0;
        }
        .service p{
        	padding:0 0 10px 0;
        	margin:0 0 10px 0;
        }
    
        /*---------------------
        	Media queries
        ----------------------*/
        @media only screen and (max-width:880px){
    
        	#sec-intro p,
        	#sec-service .service{
        		width:100%;
        		float:none;
        	}
        }
    
      </style>
    
    
      </head>
    
    <body>
    
      <div id="pageWrap">
    
        <section id="sec-service" class="group">
    
          <div id="serviceText" class="group">
    
            <div class="service">
              <h3>Heading 1</h3>
              <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
    
            <div class="service">
              <h3>Heading 2</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
              </p>
            </div>
    
            <div class="service">
              <h3>Heading 3</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    
              </p>
            </div>
    
            <div class="service">
              <h3>Heading 4</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
              </p>
            </div>
    
            <div class="service">
              <h3>Heading 5</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
    
            <div class="service">
              <h3>Heading 6</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
              </p>
            </div>
    
            <div class="service">
              <h3>Heading 7</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
              </p>
            </div>
    
          </div>
    
        </section>  
    
      </div><!-- #pageWrap -->
    
    </body>
    
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hi RachelR. Welcome to the forums.

    The only way to do it with CSS is to wrap a div around each column. You can also do it with JS, but if the div order doesn't matter, then the wrapping div around each column is the better option.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,232
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    These links might help if you are interested in a JS solution:

    http://masonry.desandro.com/
    http://www.wookmark.com/jquery-plugin


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
  •