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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS .column aligning right instead of left

    Hello,

    I am not very CSS literate so I'm going to do my best to convey the problem and hope someone here can help me with a solution.

    I have a wordpress page where I can put content in a <div class="alignright/left"> to make two near columns easily viewable by iPads with double press zooming.

    The issue is that when I put text in the right column it extends too far toward the edge of the column container before wrapping. (Image example attached)

    I tracked the alignright class to my style.css and found a width value for it.

    Code:
    /* content-columns */
    #content .columns{
    	width:980px;
    	margin:0 0 12px -20px;
    	overflow:hidden;
    	background:#1d1d1d;
    	border-bottom:6px solid #333;
    	line-height:22px;
    	padding:21px 0 0;
    }
    .columns-area{
    	width:950px;
    	padding:0 20px;
    	overflow:hidden;
    	margin:0 0 -6px;
    }
    .columns .col{
    	overflow:hidden;
    	width:100%;
    }
    .columns .alignleft,
    .columns .alignright{width:447px;}
    .socials-holder{
    	width:100%;
    	overflow:hidden;
    }
    .socials{margin:0 0 4px;}
    .socials img{
    	vertical-align:top;
    ".columns .alignright{width:447px;}", However if I scale down this value to narrow the right column it aligns the entire column to the right side instead of against the left column, effectively preserving my issue and widening the buffer between my two columns.

    Does anyone here have an idea of an attribute I can add to the column to fix this issue?

    Thanks!
    Attached Thumbnails Attached Thumbnails CSS .column aligning right instead of left-pagewrapex.jpg  
    Last edited by Feracon; 06-15-2012 at 02:33 AM.

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    I think its the padding in the .columns-area right now its set to add 20px to the right and left but you need more than that on your right side

    try this

    Code:
     .columns-area{
    	width:950px;
    	padding:0 40px 0 20px;
    	overflow:hidden;
    	margin:0 0 -6px;
    }
    Ive added 40px of padding to the right side of the entire body(according to what the above is stating.). I have no idea if this is what you were looking for. But because it looks like you are getting 20pxs of padding from the original code ( your example image ) then Im thinking you should get the bump your looking for. Add more or less padding as you see fit.

    FYI: If you look at the padding line, it is set up like so >> 0 pixels top, 40 pixels to the right, 0 pixels on the bottom and 20 pixels on the left.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Badwolf,

    Thanks so much for the suggestion, unfortunately it seems the right padding value is not being registered.

    padding:0 40px 0 20px; looks identical to padding:0 20px 0 20px;

    however,

    padding:0 40px 0 40px; pushes the columns off the right side, so the left padding value definitely works.

    Maybe if I give you the URL for the actual site you can firebug to see what may be the issue?

    http://sixense.com/razerhydrapage

    If there's more information I can give you let me know and I'll do my best, thanks again for the help.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I may have fixed it via trial and error. Still verifying that I havent screwed up the formatting elsewhere on the site.

    I took the padding syntax you showed me and added it into the alignright .column which had only a width set:

    .columns .alignleft,
    .columns .alignright{width:447px; padding:0 20px 0 0;}


  •  

    Posting Permissions

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