Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    5
    Member #
    47889

    Why are my divs dropping on Mobile?

    I have a wrapper with a left div and a right div that displays perfectly fine on desktop and landscape ipad, but on Mobile and Portrait ipad view the divs still float left and right as they are supposed to, but the right div shifts down and is well below the left column.

    HTML
    HTML Code:
    <div id="fball-wrap">
    <div class="fball-left">Left Side</div>  
    
    <div class="fball-right">Right Side</div>
    <div class="cl">&nbsp;</div>
    </div>
    Code:
    #fball-wrap{
         width: 100%;
         margin: 0 auto;
         position: relative;
    	 border: 2px solid #F2F2F2;
    	 text-align:center;
    	
    }
    .fball-left {
         width: 48%;
         float: left;
    	 padding:10px 5px;
    }
    .fball-right {
         width: 48%;
         float: right;
    	 padding:10px 5px;
    	
    }
    
    .cl{clear: both;}
    Any Ideas?
    Last edited by ferrdoggsmd; Mar 12th, 2015 at 07:12 PM.

  2.  

  3. #2
    Member
    Join Date
    Oct 2010
    Location
    Philadelphia
    Posts
    82
    Member #
    24186
    Liked
    8 times
    Your answer is in the padding.

  4. #3
    Junior Member
    Join Date
    Mar 2015
    Posts
    5
    Member #
    47889
    Thank you, this worked. I am assuming with the width the 48% and the 5px of padding on each side it would not fit side by side. Am I on the right track here?
    Also is there a way to handle this in one css statement where I still get the padding on my desktop but not the mobile? Or will a media query have to be used?

  5. #4
    Member
    Join Date
    Oct 2010
    Location
    Philadelphia
    Posts
    82
    Member #
    24186
    Liked
    8 times
    media query would be best. You can set the padding to ems but, that just starts getting odd. Best bet really is just to kill the float and make each div 100% on phone. Anything split at aprox. 50% gets a little too small on phone size.

  6. #5
    Banned
    Join Date
    Mar 2015
    Posts
    21
    Member #
    48461
    Your size may have incorrectly, you need to increase the width of 1px solid border-right up on 1280


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com