CSS Layout Issue [solved]

[pixel8]

Hi there Bradley,

I'm pretty new to this CMS milarky, but having a great deal of fun doing exactly what your doing, transferring a static site over to cms.
I know a bit about css, and had a quick look at what you have, and there seems to be an issue with the 3 columns 'floating'. I did a quick test and this seems to have helped:

#scripture, #events, #info { margin:4px; } /*I created a bit of margin around the columns*/
/*I've floated all 3 columns to the left*/
div#scripture {
  clear: left;
  float: left;
  width: 32%;   
  height: 300px;
  display: block;
  background-color: #ffffff;
  border: 3px outset #000000;
}

div#events {
  float: left;
  width: 31%;   
  height: 300px;
  display: block;
  background-color: #ffffff;
  border: 3px outset #000000;
}

div#info {
  float: left;
  width: 31%; 
  height: 300px;
  display: block;
  background-color: #ffffff;
  border: 3px outset #000000;
}

Give it a go, and let me know if it has worked.
peace out.......pixel8

[pixel8]

You still have the margin on the individual styles:

div#scripture { margin-left:0; } /*take out the margin*/
div#events { margin-left: 32%; }  /*take out the margin*/
div#info { margin-left: 64%; } /*take out the margin*/

Just leave in the style at the beginning: div#scripture, #events, #info { margin:4px; } /*this will cover all 3 so you don't have to repeat the same declaration in each*/

[davendar]

I'm only learning CSS myself, but something like this should work. I've added padding to each box of 2% left and right (both count when dealing with padding, border, content, and margins). If you didn't want padding in your boxes, you can take off the left and and right padding of 2% and make your widths 29% each instead (25% + 2% +2%). My solution adds up to 95% in widths, leaving the other 5% for your borders of 3px (left and right x 3 boxes, or 12px total). You need to understand the CSS box model which is what is causing your current current solution to break. This is also assuming you have no padding or margins in the container where the boxes are going. You'd have to reduce your widths to accommodate for any extra there. And this code could even be cleaned up a big. But I'll let the gurus help there. Let me know if this helps.

Darling


###########################
OPTION WITH INSIDE BOX PADDING
div#scripture {
  float: left;
  width: 25%;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 2.3%;
  padding: 10px 2%;
  height: 300px;
  background-color: #fff;
  border: 3px outset #000000;
}

div#events {
  float: left;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 10px 2%;
  margin-left: 3%;
  width: 25%;
  height: 300px;
  background-color: #fff;
  border: 3px outset #000000;
}

div#info {
  float: left;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 10px 2%;
  width: 25%;
  margin-left: 3%;
  height: 300px;
  background-color: #fff;
  border: 3px outset #000000;
}

###########################
OPTION WITH NO INSIDE BOX PADDING
div#scripture {
  float: left;
  width: 29%;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 2.3%;
  padding: 0;
  height: 300px;
  background-color: #fff;
  border: 3px outset #000000;
}

div#events {
  float: left;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 0;
  margin-left: 3%;
  width: 29%;
  height: 300px;
  background-color: #fff;
  border: 3px outset #000000;
}

div#info {
  float: left;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 0;
  width: 29%;
  margin-left: 3%;
  height: 300px;
  background-color: #fff;
  border: 3px outset #000000;
}

[climberusa]

Try this:

Code: Select all

div#scripture {
   float: left;
   width: 225px;    
   height: 300px;
   margin: 0 8px;
   background-color: #ffffff;
   border: 3px outset #000000;
}

div#events {
   float: left;
   width: 225px;    
   margin:0 8px 0 0;
   height: 300px;
   background-color: #ffffff;
   border: 3px outset #000000;
}

div#info {
   float: left;
   width: 225px;
   margin: 0;    
   height: 300px;
   background-color: #ffffff;
   border: 3px outset #000000;
}

Then you need to make the table within div#scripture narrower than 225 sit it doesn't break out of the box.