Cell Padding/Spacing with DIV's 4

[1DMF]

Hello folks,

I'm converting over my site to XHTML & CSS, i've converted one page that had a table structure

http://www.homeloanpartnership.co.uk/tablelenders.jpg

i've managed to nearly duplicate it with DIV's

http://www.homeloanpartnership.co.uk/divlenders.jpg

only as you can see i'm having dificulty in getting the spacing between the div's right. Can some one help as to am i correctly using the div's to replace my table and how do i set the spacing, i have tried to put a spacer div inbetween setting its height to 1px but that doesn't seem to work, I get a much bigger gap.

Here is the code

<div align="center"><img src="images/hlp-lenders.jpg" title="HLP Lender Partners" border="0" alt="HLP Lender Partners" /></div>
<div align="center">
    <div align="center" style="width:610px;">
        <div align="left" class="titlecell" onmouseover="window.status='Please choose a menu option'">&nbsp;HLP Lender Partners</div>
        <div style="width:300px; height:80px; padding:2px; float:left">
            <div class="table" style="padding:2px;">    
                <img src="images/dtl.gif" onmouseover="window.status='Direct Lender Panel'" onmouseout="window.status='Please choose a menu option'" title="Direct Lenders" style="cursor:pointer" border="0" alt="" onclick="window.open('/M2K-HLP2/directtolender.asp','DTL',
'scrollbars=yes,width=420,height=545,fullscreen=no');" />
            </div>
            <div style="height:1px;"></div>
            <div class="table" style="padding:2px;">
                <a href="#" onmouseover="window.status='Direct to Lender Procuration Fees'" onmouseout="window.status='Please choose a menu option'" onclick="document.lenders.FA.value='COM'; document.lenders.PROV.value='DTL'; document.lenders.submit();">Direct to Lender<br /><img alt="" src="images/10quid.jpg" title="Lender Procuration Fees" style="cursor:pointer" border="0" /><br />Procuration Fees</a>
            </div>
        </div>
        <div  style="position:relative; width:300px; height:80px; padding:2px; float:right">
            <div class="table" style="padding:2px;"> 
                <img src="images/packaged.gif" onmouseover="window.status='Packaged Lender Panel'" onmouseout="window.status='Please choose a menu option'" title="Packaged Lenders" style="cursor:pointer" border="0" alt="" onclick="window.open('/M2K-HLP2/packagedlenders.asp','PKG',
'scrollbars=yes,width=420,height=375,fullscreen=no');" />
            </div> 
            <div style="height:1px;"></div>           
            <div class="table" style="padding:2px;">
                <a href="#" onmouseover="window.status='Packager Procuration Fees Menu'" onmouseout="window.status='Please choose a menu option'" onclick="document.location.href='lenders.cgi';">Packaged Products<br /><img alt="" src="images/10quid.jpg" title="Packager Procuration Fees" style="cursor:pointer" border="0" onclick="document.location.href='lenders.cgi';" /><br />Procuration Fees</a>
            </div>            
        </div>
        <div class="titlecell" onmouseover="window.status='Please choose a menu option'">&nbsp; </div>   
    </div> 
</div>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

any way i can match the original design?

Umm.... I think my post above did. But if that still wasn't what you were after let me know what needs changed and I'll give it another stab.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

Will try your way after dinner - thanks, missed the post scrolled down so fast i missed it first time round - sorry

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ca8msm]

the siolution i have isn't ideal, ive found because the main 4 divs have been set with a margin of 2px when the left and right float are put together the two floated divs have a distance of 4px making it look uneven.

Wouldn't removing the 2px margin make it align (you could change it to margin-bottom if you still wanted to keep the gap at the bottom of the boxes)?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[1DMF]

i've tried kaht's method and with a few tweeks and an extra div container to center everything it seems to be the closest i'm gonna get.

though I had to change the width on one of the div's it was set to 600px; but the content was making it stretch wider than that so the <h1> was coming up short like so...

http://www.homeloanpartnership.co.uk/kaht.jpg

is that what

   clear:both;

does? stops the right side being forced down to the next line ?

here is the final code, thanks for the help.

CSS

#titlecell
    {
    font-family: Arial, Verdana;
    font-size: 12pt;
    color: #ffffff;
    background-image: url('/images/tablebar.jpg');
    background-repeat: no-repeat;
    text-decoration: none;
    padding-bottom: 25px;
    background-position: bottom;
    }
        
#titlecell h1
    {
    font-family: Arial, Verdana;
    font-size: 15pt;
    color: #ffffff;
    background-image: url('/images/tablebar.jpg');
    vertical-align: bottom;
    background-repeat: no-repeat;
    text-decoration: none;
    font-weight:normal;
    text-align:left;
    }
 
#titlecell div
    {
    margin: 2px;
    padding: 5px;
    width: 292px; 
    border-width: 1px;
    border-style: solid;
    border-color: #233e97;
    text-align: center;
    }
    
div.boxl {
   float:left;
}

div.boxr {
   float:right;
   clear:both;
}

XHTML

<div align="center">
    <div id="titlecell" style="width:620px;" align="center">
        <img src="/images/hlp-lenders.jpg" alt="HLP Lender Partners" />
        <h1>&nbsp;HLP Lender Partners</h1>
        <div class="boxl"><img src="/images/dtl.gif" alt="" /></div>
        <div class="boxr"><img src="/images/packaged.gif" alt="" /></div>
        <div class="boxl"><a href="#">Direct to Lender<br /><img alt="" src="/images/10quid.jpg" title="Lender Procuration Fees" /><br />Procuration Fees</a></div>
        <div class="boxr"><a href="#">Packaged Products<br /><img alt="" src="/images/10quid.jpg" title="Packager Procuration Fees" /><br />Procuration Fees</a></div>
    </div>
</div>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

here's a definition:

http://www.w3schools.com/css/pr_class_clear.asp

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

thanks for the link, didn't understand it though, not unexpected really, so i took it out the CSS to see what would happen to get a better idea and well nothing happened.

so i'm none the wiser -lol

thanks far all the input, hopefully my next page will be better, building on what you have just taught me.

regards
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

thanks for the link, didn't understand it though

Probably best to explain it thru an example then. Try uncommenting each "clear" line 1 at a time and see what happens to the green div. You'll notice that clear:right an clear:both act the same - the reason for this being that the right div is taller than the left div. If the left div was taller, then clear:both would behave the same as clear:left. Note also that the "clear" property only exhibits this behavior with floated elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<style type="text/css">

#leftDiv {
   float:left;
   width:100px;
   height:100px;
   background-color:#ff0000;
}

#rightDiv {
   float:right;
   width:100px;
   height:300px;
   background-color:#0000ff;
}

#clearTest {
   height:50px;
   background-color:#00ff00;
/*   clear:left; */
/*   clear:right; */
/*   clear:both; */
}

</style>
</head>
<body>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
<div id="clearTest"></div>
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

many thanks, you've been so helpful.

People, please give kaht more stars on my behalf.

1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.