How to achieve disorganised bubble layout with html css?


Tags: html,css

Problem :

I need to have a bubble layout like this:

enter image description here

I have completed the work till this stage - JsBin

As I am not that skilled in CSS/Web design, I can only think of using table tr td. But I can see I will need the bubbles to be aligned close to each other. If I go for table structure, I dont think it will work.

Please suggest some design structure, or I should go for other things, SVG, etc.

Thanks!



Solution :

I hope this helps you :) I have fun with this. (Also check out this for some great reading / viewing http://paulbourke.net/texture_colour/randomtile/)

Demo: http://po0.co.uk/circles/

Uses: http://packery.metafizzy.co/

Code:

<style>
    .circle
    {
    border-radius:50%;
    text-align:center;
    background:#efdeee;
    display:inline-block;
    margin:-5px;
    }
</style>
<div id="container">
    <?php
    $xx = 1;
    while ($xx <= 200) {
        $thisx = rand(10,99);
        echo '<div class="item circle" style="width:'.$thisx.'px;height:'.$thisx.'px;">&nbsp;</div>';
        $xx++;
    }
    ?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.min.js"></script>
<script>
    var container = document.querySelector('#container');
    var pckry = new Packery( container, {
      // options
      itemSelector: '.item',
      gutter: 10
    });
</script>

    CSS Howto..

    How to set vertical align middle for a div enclose another div

    How do I use CSS to give a section a background that doesn't scroll with the page?

    How to delay Hide/Show events until Iframe loads after a submit

    CSS - How to overlap elements over everything but each other? (No margin/padding etc)

    show/hide slider toggle for any number of IDs

    How to do onclick in CSS to do transition on image?

    IE8 and lower showing background white

    How to display shopping cart at the right of page

    CSS show elements below each other

    How to select an element and its first child without repetition in CSS?

    how to align vertically an absolute element with a variable height above its parent?

    How to make this character to be placed at the right side of its container?

    How to change Google Chrome Arabic default font in css?

    How to indent text exactly one character width

    How to deal with the hover issue of overlapped non-square DIV?

    How to change background color of my selector's Pseudo-element on rollover?

    OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

    jquery easyui TreeGrid: How to make only Column Headers Bold

    How to draw a line with button the center of the line

    Getting an error message to show up inline of input

    how to center text vertically in html using css only

    CSS How to apply child:hover but not parent:hover

    Can someone show me how to get my CSS code to work more than once? [closed]

    How to apply CSS style for the current page link

    How can I make a split-text input placeholder?

    How to arrange two butons side by side in Struts2

    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

    How to use jQuery to fade in/out li a:hover css background-color?

    CSS: How do I make a !100% header with a repeat-x background and tip

    How to add Css classes in TinyMCE editor Styles drop down through coding