• 0
Sign in to follow this  
Followers 0

Column Padding forcing column to new row


Question

Posted · Report post

Hi there,

 

I am currently working on a simple 2 column layout. I have a backgound image and wanted to style the indivudual columns with their own background and padding. 

 

When i attempt to add padding to the column it forces the adjacent column to a new row. Any ideas how to get around this?

 

Here is the custom styling class i am using: 

 

/* White Section */
#site .white-section {background: rgba(255,255,255,0.7);  border-radius: 5px; padding:10px;  }
 
Thanks,
 
Sean

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Do as I suggested above using box-sizing: border-box; to your code, this will resolve your issue.

 

http://cl.ly/image/0z093m2R3w1i

 

You shouldn't add padding to columns like that, you usually do that in the div after. However, using box-sizing will resolve the problem as you can see from my image.

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you provide a link to the site in question.

 

As Columns are calculated so any increase to their widths will cause the issue you're having now. You will probably want to either not apply the padding to the column itself, but instead to a div lower down the dom and/or use the following CSS in your snippet.

 

box-sizing: border-box;

 

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Wroth noting that right-hand column only gets forced down when i hit preview.

 

All looks fine when editing. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great Danny

thanks for your help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0