flot left probel I think

[otuatail]

Hi I have a page with a large box div and smaller ones inside to make a table. The last one on the line does not float left. I can see a gap to the left. is there a way of removing it.

 

http://www.yorkbaptist.org.uk/FNL3.php  The styles are below

 

Outline
{
  float: left;
  color:grey;
  background:white;
  border:solid;
  border-width:1px;
  padding-left:0px;
}

.Outline2
{
  color:grey;
  background:white;
  border:solid;
  border-width:1px;
  height:500px;
}

.date
{
  padding-left:4px;
  float: left;
  background-color:#aaaaaa;
  width:80px;
}

.group
{
  float: left;
  background-color:#aaaaaa;
  width:160px;
}

.title
{
  float: left;
  background-color:#aaaaaa;
  width:200px;
}

.passage
{
  background-color:#aaaaaa;
  width:150px;
}

.combined1
{
  background-color:#aaaaaa;
  width:350px;
}

 

TIA Desmond.

 

[otuatail]

Sorry to be a pain. I was thinking that I could add an extra columb 1 pixel and make the previouse float left but that sounds daft. Could this be done by padding zero pixels? not sure how this works.

 

Desmond.

 

[F1Fan]

Your problem could be margin.

[otuatail]

No I thought that. I  went through all the claas's and added margin, border, padding zero that made no diffrence.

[F1Fan]

I just looked at your site. You need to add the CSS display attribute to each of your elements. Use table, table-row, and table-cell in your div classes so they act like a table.

 

Reference: http://www.w3schools.com/css/pr_class_display.asp

[otuatail]

So what you are saying use a table in a CSS? why not go back to the old system of using tables and leave CSS out of it.

I have corrected the problem using all float lefts inside a larger div with a fixed with. works FANTASTIV in IE8

http://www.yorkbaptist.org.uk/FnlCrossfire.php

 

But CRAP

 

in Firefox. This w3c standards

 

 

[n000bie]

Since your contents are tabular data so go on with tables.

 

 

[F1Fan]

Your layout looks like a table. The <table> tag is very web 1.0, but many people still use them, including me. Sometimes there is no other way to get exactly what you want without using tables. In this case, you could get what you want using divs, but it would be much easier to get your desired result in all browsers using tables.

[otuatail]

Ok I have managed to do this using <div> only. It needed   where there was no information. Not a table in site.

 

Desmond.