WordPress.org

1. Broomy
   Member
   Posted 5 years ago #

   I'm trying to add three boxes next to each other, each one at a third of the page width. I've tried doing this but keep seeing problems (right box below others, extra box somehow in right nav, left colum now moves when viewing a post in I.E). Could anyone suggest what i'm doing wrong?

   My site is wahow .org and I have the css setup as follows:

   #container {
   margin: 2px auto;
   text-align: left;
   width: 100%;
   height: 130px;
   border: 2px dotted #777744;
   }
   #leftbar {
   float: left;
   width: 33%;
   height: 65px;
   margin-left: 2px !important;
   margin-left: 1px;
   padding: 2px;
   background: #f4f4f0;
   border: 1px solid #777744;
   }
   #centralbar {
   float: left;
   width: 33%;
   height: 65px;
   margin: 0 2px;
   padding: 2px;
   border: 1px solid #777744;
   }
   #rightbar {
   float: left;
   width: 33%;
   height: 65px;
   padding: 2px;
   background: #f4f4f0;
   border: 1px solid #777744;
   }

   Thanks for any help, I appreciate it.

2. vavroom
   Member
   Posted 5 years ago #

   3x33%=99%, add 18px (2px padding on each side of each div, plus 1px border on each side of each div), then add margins on one div... you reach over 100% width, which means your boxes will flow down.

   18px, you'd need a page width of 1800px for the layout to work.

3. Broomy
   Member
   Posted 5 years ago #

   How would I change this so that it is compliant with all browsers as I'd copied this exactly from a working example, apart from changing the widths to percentages rather px?

   Would I also change the padding and spacing to percentages?

   Thanks again

4. vavroom
   Member
   Posted 5 years ago #

   hehehehe, well, changing from px to % is not a "small" change, particularly when you start mixing % and px in the end result.

   Changing padding and spacing to percentage might work, but that also gets tricky.

   If you're thinking about mixing px and %, you have to determine the monitor size the majority of your user have, and add up your padding, borders, margins, etc. Then figure out how much of that is in terms of percentage in relation to the monitor resolution, then you know how much percentage you have to spread over your three columns.

   For example, say 85% of your visitors are on 1024x768. Remove a few px for scrollbars, etc. So you're playing with 1000 px. you have 18px, which is a hair under 2%. So, you have 98% of width available to play with.

   But then, that means your site would still break on monitors using 800x600. Or people resizing their windows.

   As to make it work across browsers... read up on box model and box model hacks, and how IE handles padding/margins differently.

   Hve fun

5. Broomy
   Member
   Posted 5 years ago #

   Thanks vavroom, i'll get reading!

Topic Closed

This topic has been closed to new replies.