Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Responsive Design for 4 DIVs

    Hi,

    I have some issues with designing a layout for 4 DIVs for smaller screens.

    This is the original HTML/CSS
    Code:
    <div id="a" style="float:left">aaaaaa</div>
    <div id="b" style=float:left;margin-left:150px;>bbbbbb</div>
    <div id="c" style="float:left;margin-left:150px;">ccccccc</div>
    <div id="d" style="float:right;">dddddd</div>

    This is the URL : Slide/Scroll Example

    When the screen width is big, it will display the 4 divs horizontally. But when the screen size comes to similar to an iPad, I want this to display in 2 rows. First 2 DIVs should come in the first row and the next 2 DIVs should come in the 2nd row. How can I go about it ?


    Please throw me some light on it , really appreciate it.

    thanks,

    Isaac

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello Isaac Sureshkum,
    Look at it this way once -
    Code:
    #mainHolder {
                    width:100%;
                    text-align:center;
                }
                
                
                #extraSlideWrapper {
                    /*width:1200px;
                    margin:auto;*/
                    text-align:center;
                }
                
                
                /* #extraSlideContentA {
                    float:left;
                }
    #extraSlideContentB {
                    float:left;
                    margin-left:130px;
                } 
    #extraSlideContentC {
                    float:left;
                    margin-left:130px;
                }  
     #extraSlideContentD {
                    float:right;
                }   
    */
    
                
                         
                
                
                
                      
                
               
                
                
                
                #extraSlideContentA img, #extraSlideContentB img, #extraSlideContentC img, #extraSlideContentD img {
                    cursor : pointer;
                    width:100%;
                }
                
                
                #extraSlideContentA, #extraSlideContentB, #extraSlideContentC, #extraSlideContentD {
                    position:relative;
                    width:200px;
                    height:230px;
                    border:1px solid black;
    display: inline-block;
                }
                
                
                div.extraSlideTitleWrapper {
    		background-color:red; 
    		height:30px;
    		font-size:20px;
    		font-weight:bold;
    		text-align:center;
    		color:#ffffff;
    	    }
    
    
                div.extraSlideTitleWrapper:before {
    		content:'';
                    display:inline-block;
    		height:100%;
                    vertical-align:middle;
    	    }
    
    
                div.extraSlideTitle {
                    display:inline-block;
                    vertical-align:middle;
    	    }
                
                
                div.pointer {
                    position:absolute;
                    bottom:0px;
                    margin-left:70px;
                }
                
                
                div.pointer img {
                    max-width:30px;
                    background:rgba(0,0,0,0.8);
                }
                
                
                #ImageDisplay {
                    margin:auto;
                }
                
                
                .pointer img:hover {
                    background:rgba(0,0,0,0.3);
                }
    To keep two together when it gets narrowed, a and b, and c and d would need to be in separate containing elements.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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