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
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 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
  •