www.webdeveloper.com
Results 1 to 5 of 5

Thread: Aligning Div Squares...

  1. #1
    Join Date
    Feb 2014
    Posts
    2

    Aligning Div Squares...

    Hello everyone I hope you're doing awesome.

    I'll cut to the chase, I want to align 7 div squares in the next fashion.


    AAABBBBBBCCC
    AAABBBBBBCCC
    DDDBBBBBBEEE
    DDDBBBBBBEEE
    FFFBBBBBBGGG
    FFFBBBBBBGGG

    A,C,D,E,F,G = different divs with aprox. 125x125px
    B= middle div takes the same height of all of the divs stacked together and width around 40%

    Now I tried a couple of things but I keep messing it up, here's my try at it... Here's my attempt
    fiddle

    I don't want to use absolute position or specific coordenates and sizes (just the min-width/height) because I want it to look good if the user resizes...

    Or if you don't want to click the link

    HTML Code:
    <div id="div1" style="width: 100px; height: 100px;float:left;background-color: brown;"> (div1)</div>
    <div id="bigdiv" style="width: 46%;  float:left;background-color: green;">middle div</div>
    <div id="div3" style="clear:left; width: 100px; height: 100px;background-color: red;"> (div3)</div>
    <div id="div4" style="width: 100px; height: 100px;background-color: orange;">(div4)</div>
    <div id="div5" style="float:right; width: 100px; height: 100px;background-color: red;"> (div5)</div>
    <div id="div6" style="float: right; width: 100px; height: 100px;background-color: orange;">(div6)</div>

  2. #2
    Join Date
    Oct 2013
    Posts
    457
    Is this what you want?

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    
    <div id="left-container" style="float:left;">
    <div id="div1" style="width:100px; height:100px; background-color:brown;">(div1)</div>
    <div id="div2" style="width:100px; height:100px; background-color:blue;">(div2)</div>
    <div id="div3" style="width:100px; height:100px; background-color:red;">(div3)</div>
    </div>
    
    <div id="bigdiv" style="width:46%; height:300px; float:left; background-color:green;">middle div</div>
    
    <div id="right-container" style="float:left;">
    <div id="div4" style="width:100px; height:100px; background-color:orange;">(div4)</div>
    <div id="div5" style="width:100px; height:100px; background-color:red;">(div5)</div>
    <div id="div6" style="width:100px; height:100px; background-color:purple;">(div6)</div>
    </div>
    
    </body>
    </html>

  3. #3
    Join Date
    Feb 2014
    Posts
    2
    Quote Originally Posted by Kevin2 View Post
    Is this what you want?

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    
    <div id="left-container" style="float:left;">
    <div id="div1" style="width:100px; height:100px; background-color:brown;">(div1)</div>
    <div id="div2" style="width:100px; height:100px; background-color:blue;">(div2)</div>
    <div id="div3" style="width:100px; height:100px; background-color:red;">(div3)</div>
    </div>
    
    <div id="bigdiv" style="width:46%; height:300px; float:left; background-color:green;">middle div</div>
    
    <div id="right-container" style="float:left;">
    <div id="div4" style="width:100px; height:100px; background-color:orange;">(div4)</div>
    <div id="div5" style="width:100px; height:100px; background-color:red;">(div5)</div>
    <div id="div6" style="width:100px; height:100px; background-color:purple;">(div6)</div>
    </div>
    
    </body>
    </html>

    Sometimes I feel like a dork. Thanks for your help I didn't think it was that easy.
    You are awesome.

  4. #4
    Join Date
    Oct 2013
    Posts
    457
    Every once in a while I get lucky. Glad it worked!

  5. #5
    Join Date
    Mar 2012
    Posts
    1,340
    I agree that making the middle column 46% of the overall display width is an easy way of making the page responsive, but I would suggest a small modification. Why? Well, 46% means that:
    - The minimum overall page width is 200 + 200*54/46 = 435px. Of which, the middle column is 235px wide.
    - On a 1366px wide screens, the middle column would be 1366*54/100 = 738px wide.
    - On a full HD screen, the middle column would be 1920*54/100 = 1037px.

    I agree with the minimum page width of 435px, as that is accommodated by a diminutive 480x320 mobile display, but allowing a 4.4:1 ratio of the middle column risks the page looking unsightly on larger displays. Of course, that depends upon the content, but I wold suggest that it might be appropriate to limit the maximum width of the body to 720px or so, as that limits the middle column to 520px or so. It might also be appropriate to set "margin: 0 auto;" on the body, to allow it to "float" to the middle of the display.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles