2

This is my style containing the float left and fixed width.

<style>
ul { width:600px; }
ul li  { list-style:none; float:left; width:49%; border:1px solid; }

This is my Html

<ul>
<li>testing</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a </li>
<li>testing</li>
<li>testing</li>
<li>testing</li>
<li>testing</li>
<li>testing</li>
<li>testing</li>

Now, The output will be like : first li element will take the height of the second big li element. And third li element will start with lot of white space under the first li element.

How to remove this space. Can put my third li block just below the my first li block?

Husen
  • 955
  • 1
  • 6
  • 16

3 Answers3

1

This need to be done using jQuery.

Here is one of the plugin for it.

http://www.jqueryscript.net/layout/Dynamic-Grid-Layout-Plugin.html

Tushar
  • 4,280
  • 5
  • 24
  • 39
  • Hello Tushar, Thanks for the reply. But, i need this to be done without jQuery. Is there any way to do this thing using only css/css3. – Husen May 29 '14 at 07:23
  • If you have dynamic height of li then there is no option other then using js. If height is static then you can set the element by position: absolute. You can not align them using just float. – Tushar May 29 '14 at 08:27
1

If you can use CSS3 in your project, here is a fiddle with a working example: http://jsfiddle.net/T7ttY/

Here is the HTML code:

<div id="flexbox"><div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div><div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div><div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div></div>

Here is the Css code:

 #flexbox{display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: start;-webkit-box-align: start;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: start;-moz-box-align: start;display: box;box-orient: horizontal;box-pack: start;box-align: start;overflow: hidden;width: 100%;}#flexbox .col{padding: 30px 3% 0;width: 27%;margin-bottom: -99999px;padding-bottom: 99999px;}#flexbox .col p{margin-bottom: 30px;}#flexbox .col:nth-child(1){background: #ccc;}#flexbox .col:nth-child(2){background: #eee;}#flexbox .col:nth-child(3){background: #eee;}

Sorry for the not properly formatted code.

Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
  • Do you have your project done in non Css3 browser? Try to use https://code.google.com/p/html5shiv/ or a Css3 polyfill. – Giacomo Paita May 29 '14 at 09:23
  • Hello Giacomo, thanks, i have attached fiddle link for getting actual problem for your reference. http://jsfiddle.net/husenresearch/pNbDp/3/ The problem is i have to remove the white space between first and third block: Though, it can be resolved using jquery, but, i want to be done by only html and css/css3. – Husen May 30 '14 at 04:40
1

The Only Solution for your requirement is use of JQUERY.

With only css you can not achieve this thing.

Please check this link for demo