...

View Full Version : layout with divs and table



Partizan
02-12-2009, 09:35 AM
I would like to have my screen consisting of 2 divs, one on the left will contain a table and the one of the right a picture with text below.

This is my code but as you can see on http://www.minifigtimes.com/football.shtml the table is not positioned to the left of the image but below it. Anyone know what's wrong?




<h4 class="story-headline-top">Football</h4>

<div class="img right" style="border: 0px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">

<a href="#" style="display: block;">
<img src="images-2009/news/2009-02-09-p1.png" alt="United on form">
</a>

<p style="width: 100%;">
Legoland United have now hit top form... insert more text insert more text insert more text insert more text insert more text
</p>


</div>

<p>



<style>.ltrack { font-family: "calibri"; font-size: 10pt ; }</style>

<table border="1" width="100%" cellspacing="3" cellpadding="1" class="ltrack">


<tr>
<th>Team</th>
<th>P</th>
<th>W</th>
<th>D</th>
<th>L</th>

<th>F</th>
<th>A</th>
<th>GD</th>
<th>Points</th>
</tr>


<tr>
<td>Ajax Skerries</td>

<td align="right">28</td>
<td align="right">15</td>
<td align="right">8</td>
<td align="right">5</td>
<td align="right">30</td>
<td align="right">16</td>

<td align="right">14</td>
<td align="right">53</td>
</tr>
<tr>
<td>Legoland FC</td>
<td align="right">28</td>
<td align="right">14</td>

<td align="right">9</td>
<td align="right">5</td>
<td align="right">43</td>
<td align="right">20</td>
<td align="right">23</td>
<td align="right">51</td>

</tr>
<tr>
<td>Legoland United</td>
<td align="right">28</td>
<td align="right">14</td>
<td align="right">8</td>
<td align="right">6</td>

<td align="right">47</td>
<td align="right">20</td>
<td align="right">27</td>
<td align="right">50</td>
</tr>
<tr>
<td>Republic</td>

<td align="right">28</td>
<td align="right">13</td>
<td align="right">10</td>
<td align="right">5</td>
<td align="right">24</td>
<td align="right">17</td>

<td align="right">7</td>
<td align="right">49</td>
</tr>
<tr>
<td>Port Villa</td>
<td align="right">28</td>
<td align="right">13</td>

<td align="right">7</td>
<td align="right">8</td>
<td align="right">28</td>
<td align="right">26</td>
<td align="right">2</td>
<td align="right">46</td>

</tr>
<tr>
<td>Black Fortress Barbarians</td>
<td align="right">28</td>
<td align="right">12</td>
<td align="right">9</td>
<td align="right">7</td>

<td align="right">30</td>
<td align="right">20</td>
<td align="right">10</td>
<td align="right">45</td>
</tr>
<tr>
<td>Emperor Eagles</td>

<td align="right">28</td>
<td align="right">12</td>
<td align="right">7</td>
<td align="right">9</td>
<td align="right">23</td>
<td align="right">23</td>

<td align="right">0</td>
<td align="right">43</td>
</tr>
<tr>
<td>Juventus</td>
<td align="right">28</td>
<td align="right">9</td>

<td align="right">11</td>
<td align="right">8</td>
<td align="right">24</td>
<td align="right">22</td>
<td align="right">2</td>
<td align="right">38</td>

</tr>
<tr>
<td>Inter Police</td>
<td align="right">28</td>
<td align="right">10</td>
<td align="right">8</td>
<td align="right">10</td>

<td align="right">26</td>
<td align="right">25</td>
<td align="right">1</td>
<td align="right">38</td>
</tr>
<tr>
<td>Parma</td>

<td align="right">28</td>
<td align="right">9</td>
<td align="right">10</td>
<td align="right">9</td>
<td align="right">23</td>
<td align="right">22</td>

<td align="right">1</td>
<td align="right">37</td>
</tr>
<tr>
<td>Lazio</td>
<td align="right">28</td>
<td align="right">9</td>

<td align="right">9</td>
<td align="right">10</td>
<td align="right">22</td>
<td align="right">26</td>
<td align="right">-4</td>
<td align="right">36</td>

</tr>
<tr>
<td>Fiorentina</td>
<td align="right">28</td>
<td align="right">7</td>
<td align="right">13</td>
<td align="right">8</td>

<td align="right">23</td>
<td align="right">22</td>
<td align="right">1</td>
<td align="right">34</td>
</tr>
<tr>
<td>Napoli</td>

<td align="right">28</td>
<td align="right">7</td>
<td align="right">13</td>
<td align="right">8</td>
<td align="right">25</td>
<td align="right">26</td>

<td align="right">-1</td>
<td align="right">34</td>
</tr>
<tr>
<td>Roma</td>
<td align="right">28</td>
<td align="right">8</td>

<td align="right">10</td>
<td align="right">10</td>
<td align="right">22</td>
<td align="right">26</td>
<td align="right">-4</td>
<td align="right">34</td>

</tr>
<tr>
<td>Marino</td>
<td align="right">28</td>
<td align="right">8</td>
<td align="right">9</td>
<td align="right">11</td>

<td align="right">31</td>
<td align="right">27</td>
<td align="right">4</td>
<td align="right">33</td>
</tr>
<tr>
<td>Legoland Town</td>

<td align="right">28</td>
<td align="right">8</td>
<td align="right">9</td>
<td align="right">11</td>
<td align="right">17</td>
<td align="right">29</td>

<td align="right">-12</td>
<td align="right">33</td>
</tr>
<tr>
<td>Greentown Athletic</td>
<td align="right">28</td>
<td align="right">7</td>

<td align="right">10</td>
<td align="right">11</td>
<td align="right">23</td>
<td align="right">35</td>
<td align="right">-12</td>
<td align="right">31</td>

</tr>
<tr>
<td>Celebs</td>
<td align="right">28</td>
<td align="right">7</td>
<td align="right">9</td>
<td align="right">12</td>

<td align="right">19</td>
<td align="right">24</td>
<td align="right">-5</td>
<td align="right">30</td>
</tr>
<tr>
<td>Inter</td>

<td align="right">28</td>
<td align="right">7</td>
<td align="right">9</td>
<td align="right">12</td>
<td align="right">19</td>
<td align="right">31</td>

<td align="right">-12</td>
<td align="right">30</td>
</tr>
<tr>
<td>Lion Lakers</td>
<td align="right">28</td>
<td align="right">7</td>

<td align="right">6</td>
<td align="right">15</td>
<td align="right">31</td>
<td align="right">49</td>
<td align="right">-18</td>
<td align="right">27</td>

</tr>
<tr>
<td>Torino</td>
<td align="right">28</td>
<td align="right">6</td>
<td align="right">8</td>
<td align="right">14</td>

<td align="right">13</td>
<td align="right">25</td>
<td align="right">-12</td>
<td align="right">26</td>
</tr>
<tr>
<td>Robin Rangers</td>

<td align="right">28</td>
<td align="right">5</td>
<td align="right">10</td>
<td align="right">13</td>
<td align="right">16</td>
<td align="right">28</td>

<td align="right">-12</td>
<td align="right">25</td>
</tr>
</table>

</p>




My CSS:


body{
background-color: white;
margin-left:15%;
margin-right: 15%;
font-size:80%;
font-family:"calibri"
}

h1, h2, h3 {
color: #000;
font-weight:normal;
font-style: normal;
text-decoration: none;
margin-left: 0;
margin-bottom: 0;
}

h1{font-size: 400%;}
h2{font-size: 300%;}
h3{font-size: 200%;}
h4{font-size: 175%;}
h5{font-size: 150%;}
h6{font-size: 125%;}

br {font-size: 100%;}

p {
font-size: 100%;
}









/* Fillers */

.break {margin:1em 0;}

.story-headline {margin:3em 0 0 0;} /* above left below right */
.story-headline-top {margin:6em 0 0 0;} /* above left below right */
.p-space-removed {margin:0 0 0 0;} /* above left below right */
.news-links-top {margin:8em 0 0 0;} /* above left below right */
.footer {margin:9em 0 0 0;} /* above left below right */








.blue-bold {
color: blue;
font-weight:bold;
font-style: normal;
text-decoration: none;
margin-left: 0;
margin-bottom: 0;
}


.ltrack { font-family: "calibri"; font-size: 10pt ; }



/* Hyperlinks - General */

.link-blue { font-family: "calibri"; font-size: 10pt ; color: blue ; }
.link-blue:link {text-decoration: none}
.link-blue:visited {text-decoration: none; color: blue;}
.link-blue:active {text-decoration: none}
.link-blue:hover {text-decoration: underline; color: blue;}



/* Hyperlinks - General */
.tablelink1 { font-family: "calibri"; font-size: 10pt ; color: blue ; }
.tablelink1:link {text-decoration: none}
.tablelink1:visited {text-decoration: none}
.tablelink1:active {text-decoration: none}
.tablelink1:hover {text-decoration: underline; color: red;}







a img {
border: 0;
}





/* Main story images and text placement underneath*/

.right{
float: right;
}
.img{
border: 1px solid black;
padding: 20px;
}
.right a, .left a{
display: block;
}
.left p, .right p{
width: 100%;
}

/* End */

abduraooft
02-12-2009, 09:43 AM
Not sure, but try

.ltrack {/*football.shtml (line 148)*/
font-family:"calibri";
font-size:10pt;
display:block;
margin-right:260px;
}

Oh.. well, get rid of all errors in your markup first, before expecting the desired output, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.minifigtimes.com%2Ffootball.shtml&charset=%28detect+automatically%29&doctype=Inline&group=0

Partizan
02-12-2009, 09:50 AM
Thanks - that is an improvement but now the image looks like its in the table too..

I cannot get rid of the errors, bar the odd removal of some <br> tags as the html for all the tables is imported from an application that produces the html code in this old format..

Excavator
02-12-2009, 06:35 PM
I cannot get rid of the errors, bar the odd removal of some <br> tags as the html for all the tables is imported from an application that produces the html code in this old format..

It sounds like your using the wrong DocType then. Try this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Pepe, the bull
02-12-2009, 07:22 PM
I think its a width issue. Try making your table's ltrack class only 500px.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum