Title: Box positioning
Last modified: August 20, 2016

---

# Box positioning

 *  [surfershort](https://wordpress.org/support/users/surfershort/)
 * (@surfershort)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/)
 * Hello im pulling my hair out for what i bet is a simple solution – please help!
 * Ive created a grid system on this homepage [http://maskedball.net/](http://maskedball.net/)
   looks great in Firefox but that pain in the rear IE throws the last box-4 out
   of place.
 * Would anyone know a way to fix and complete my website.
 * Best
    Al

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278379)
 * Have a look at other grid systems like [1140](http://www.onedesigns.com/freebies/a-1140px-16-columns-css-grid-system)
   and you will see the widths are % and not px, these are much easier to control
   and calculated to about 99.6% and resize better.
 * Something like 4 * 22.05% + 3 * 3.8%
 *     ```
       .fourcol {
          margin-right: 3.8%;
          float: left;
          min-height: 1px;
       }
   
       .col-full .fourcol {
          width: 22.05%;
       }
   
       .last {
          margin-right: 0px;
       }
       ```
   
 * Then the html notice the class `last`.
 *     ```
       <div class="col-full">
          <div class="fourcol">
          </div>
          <div class="fourcol">
          </div>
          <div class="fourcol">
          </div>
          <div class="fourcol last">
          </div>
       </div>
       ```
   
 * HTH
 * David
 *  Thread Starter [surfershort](https://wordpress.org/support/users/surfershort/)
 * (@surfershort)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278386)
 * Thanks David
 * ive tried changing
 *     ```
       .box-4 {
           border: 0 solid #E6E6E6;
           display: inline;
           float: left;
           height: 250px;
           margin-bottom: 10px;
           margin-left: 0;
           margin-right: 0;
           padding: 10px;
           width: 185px;
       }
       ```
   
 * to
 *     ```
       .box-4 {
           border: 0 solid #E6E6E6;
           display: inline;
           float: left;
           height: 250px;
           margin-bottom: 10px;
           margin-left: 0;
           margin-right: 0px;
           padding: 10px;
           width: 20.5%x;
       }
       ```
   
 * But the last box is still jumping out of position.
 * Thanks
    Al
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278396)
 * Typo `width: 20.5%x;` to `width: 20.5%;`
 * Try for your theme
 *     ```
       .box-1,
       .box-2,
       .box-3{
          margin-right: 3.8%;
       }
   
       .col-full .box-1,
       .col-full .box-2,
       .col-full .box-3,
       .col-full .box-4
       {
          width: 22.05%;
       }
       ```
   
 * HTH
 * David
 *  Thread Starter [surfershort](https://wordpress.org/support/users/surfershort/)
 * (@surfershort)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278411)
 * mmmmm IE rage – i reckon im nearly there. my code looks like this – i adjusted
   the widths a little via fire bug – to get it working in firefox but IE is still
   not playing game. Really appreciate your help on this
 *     ```
       .box-1 {
   
         border: 0 solid #E6E6E6;
         float: left;
         margin-left: 10px;;
         padding: 10px;
         margin-bottom:10px;
         height:250px;
       }
   
       .box-2 {
   
         border: 0 solid #E6E6E6;
         float: left;
         margin-left: 0px;
         padding: 10px;
         margin-bottom:10px;
         height:250px;
       }
   
       .box-3 {
   
         border: 0 solid #E6E6E6;
         float: left;
         margin-left: 0px;
         margin-bottom:10px;
         padding: 10px;
         height:250px;
       }
   
       .box-4 {
   
         border: 0 solid #E6E6E6;
         float: left;
         margin-left: 0px;
         margin-bottom:10px;
         margin-right:10px;
         padding: 10px;
         height:250px;
         display:inline;
   
       }
   
       .box-1,
       .box-2,
       .box-3{
          margin-right: 2.8%;
       }
   
       .col-full .box-1,
       .col-full .box-2,
       .col-full .box-3,
       .col-full .box-4
       {
          width: 20.05%;
       }
       ```
   
 *  Thread Starter [surfershort](https://wordpress.org/support/users/surfershort/)
 * (@surfershort)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278414)
 * David i fixed it – it was a rouge hyperlink on one of the videos.
 * Your code was perfect
 * Thanks
    Al
 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278416)
 * Hi You are missing box-1 in the last row, so it could be to do with box-space
   which repeats the last box
 *     ```
       <div class="box-1">
       <div class="box-2">
       <div class="box-3">
       <div class="box-4">
       <div class="box-1">
       <div class="box-2">
       <div class="box-3">
       <div class="box-4">
       <div class="box-2">
       <div class="box-3">
       <div class="box-4">
       <div class="box-space">
         <div class="box-4">
       ```
   
 * box-4 `margin-right` should be 0
 * HTH
 * David

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Box positioning’ is closed to new replies.

 * 6 replies
 * 2 participants
 * Last reply from: [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * Last activity: [14 years, 7 months ago](https://wordpress.org/support/topic/box-positioning/#post-2278416)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics