Jump to content

Archived

This topic is now archived and is closed to further replies.

radroz

2 column layout is wonky

Recommended Posts

radroz

Okay... I'm at my wits end here. I've got a page that has a 2-column layout. It's about as basic as can be.

 

Column 1 is 8/12 and has the post loop. Column 2 is 4/12 and has a text box with more information.

 

I've stripped all CSS from the 2nd column, and the post loop is just copy.

 

The 2nd column forces itself to a new line... and then on a page reload, disappears!

 

DOUBLEYEW TEA EFF!

 

http://madeintheshadeblinds.com/mits/about-our-franchises/ 

 

I have cleared the section of both columns, re-added them, and even tried deleting the whole section, and re-built it from scratch. It all started when I tried to put a border on the sidebar column. I have since disabled that particular CSS, but the problem persists. And I'm about to take a shotgun to my computer.

 

Good thing I don't own a shotgun.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You have answered your own issue :D

The problem is you adding a border, the columns width are configured via accurate percentage and when you add a border with 1px width or 20px width the element will pushed below, due to the added width which knocks off the percentage.

 

To resolve this you can either use the box-shadow property or you can still use border but you will need to use it alongside the box-sizing property for example:

 

border-right: 1px solid #F00;
box-sizing: border-box;
 
When you use this, the box-sizing property allows to define certain elements to fit inside an element in a specific way. For more information on this see here - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
radroz

But you don't get it. I removed the border entirely and the problem remains.

Share this post


Link to post
Share on other sites
radroz

Okay, after sleeping on it, I found the problem. I had some old code from their previous site that was throwing it off. Instead of using <b> for boldface, I used <strong>. I replaced all the <strong> bits with <b> and it fixed it. Problem solved.

I'd like a border around the whole box, though. Just a 1px border. An itty bitty thing...

Share this post


Link to post
Share on other sites
Danny

Then remove the -right from the code I gave you previously and apply to your custom CSS. As long as you have box-sizing there shouldn't be an issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×