...

View Full Version : CSS .column aligning right instead of left



Feracon
06-15-2012, 01:28 AM
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.


/* 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!

badwolf
06-15-2012, 01:47 AM
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


.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.

Feracon
06-15-2012, 06:01 PM
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.

Feracon
06-15-2012, 06:12 PM
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;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum