CODEWITHSUNDEEP
phphtmlcsslayout
JeffVader
JeffVader

Reputation: 702

Dynamic DIV Layout?

I'm trying to work out how to dynamically layout DIV's so they form a grid effect layout.

My page is very simple. I have a DIV which is a wrapper and is made using :

#wrapper { 
    width: 80%;
    margin: 50px auto; 
    padding: 20px; 
    border:1px solid #000000; 
    display: table;
    }

Here is a FIDDLE of this page working.

Within that I want to layout 6 cells ( possibly 8 but for this 6 will be fine ) The cells are displayed using parent & child css.

The users permissions determins how many cells they may see. So some users will see 6, others 5, 4,3 etc..

The attached screen shot shows how I want the layout to look based on the number of cells shown. ( all centred correctly - unlike my image)

enter image description here

The text entry for the cells isn't important, some users will see 2 cells and this may be 'field 1' & 'field 6', another user it could be 'field 5' & 'field 2' etc.

A cell is created using 

<div class="child">
        <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png' />
        <p>field 1</p>
    </a>
    </div>

php will be used to hide the above code for any cell that is not to be viewed.

Any idea how I can acheive this ?

Thanks

Upvotes: 0

Views: 299

Answers (2)

idzignr
idzignr

Reputation: 36

You can work around with CSS3 flex property and java script. In HTML file, you need to just place all the six child elements [div.child] inside the parent [div#parent]. The splitting of child elements can be done using JavaScript itself.

Check this following code:

<!doctype HTML>
    <html>
        <head>
            <style>
                #wrapper { 
                    width: 80%;
                    margin: 50px auto; 
                    padding: 20px; 
                    border:1px solid #000000; 
                    display:block;
                }
                #parent {
                    display: flex;
                    font-size: 1em;
                    height: auto;
                    justify-content: space-around;
                    line-height: 0.6em;
                    margin: 0 0 30px;
                    text-align:center;
                }
                .child {
                    width: 120px;
                    height: 75px;
                    border: solid 1px #000;
                    display: inline-block;
                    letter-spacing: normal;
                    font-size: normal;
                    white-space: normal;
                    text-align: center;
                    vertical-align: middle;
                    margin:5px 25px 20px 25px;
                }   
            </style>
        </head>
        <body>
            <div id="wrapper">
                <div id="parent">
                    <div class="child">
                        <a href="">
                            <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
                            <p>field 1</p>
                        </a>
                    </div>
                    <div class="child">
                        <a href="">
                            <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
                            <p>field 2</p>
                        </a>
                    </div>
                    <div class="child">
                        <a href="">
                            <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
                            <p>field 3</p>
                        </a>
                    </div>
                    <div class="child">
                        <a href="">
                            <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
                            <p>field 4</p>
                        </a>
                    </div>  
                    <div class="child">
                        <a href="">
                            <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
                            <p>field 5</p>
                        </a>
                    </div>  
                    <div class="child">
                        <a href="">
                            <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
                            <p>field 6</p>
                        </a>
                    </div>  
                </div>
            </div>
        </body>
    </html>
<script>
    var wrapper= document.getElementById('wrapper');
    var temp= document.getElementById('parent');
    child= temp.childElementCount;
    if(child == 3)
    {
        temp.style.flexFlow= "row nowrap";
    }
    if(child == 4)
    {
        temp.style.flexFlow="row nowrap";
        var row2 = document.createElement("div");
        row2.setAttribute('id','parent');
        var child3= temp.childNodes[5];
        var child4= temp.childNodes[7];
        row2.appendChild(child3);
        row2.appendChild(child4);
        wrapper.appendChild(row2);
    }
    if(child == 5)
    {
        temp.style.flexFlow="row nowrap";
        var row2 = document.createElement("div");
        row2.setAttribute('id','parent');
        var child4= temp.childNodes[7];
        var child5= temp.childNodes[9];
        row2.appendChild(child4);
        row2.appendChild(child5);
        wrapper.appendChild(row2);
    }
    if(child == 6)
    {
        temp.style.flexFlow="row nowrap";
        var row2= document.createElement("div");
        row2.setAttribute('id','parent');
        var child4= temp.childNodes[7];
        var child5= temp.childNodes[9];
        var child6= temp.childNodes[11];
        row2.appendChild(child4);
        row2.appendChild(child5);
        row2.appendChild(child6);
        wrapper.appendChild(row2);
    }
</script>

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10834

You said you generate the code with PHP so just add an if that decide which layout is needed. If you need only 4 divs generate only two child divs per parent div.

Your HTML and CSS seems to work just fine when I delete divs from the HTML code.

I don't see a reason to complicate your CSS if you can easily work this out via the PHP code. Simple and clean HTML and CSS will be loaded and rendered faster and also will be easier to maintain.

Upvotes: 0

Related Questions