Box positioning

  • surfershort

    (@surfershort)


    14 years, 7 months ago

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

    (@adeptris)

    14 years, 7 months ago

    Have a look at other grid systems like 1140 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

    (@surfershort)

    14 years, 7 months ago

    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

    (@adeptris)

    14 years, 7 months ago

    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

    (@surfershort)

    14 years, 7 months ago

    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

    (@surfershort)

    14 years, 7 months ago

    David i fixed it – it was a rouge hyperlink on one of the videos.

    Your code was perfect

    Thanks
    Al

    Digital Raindrops

    (@adeptris)

    14 years, 7 months ago

    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.