1 reply [Last post]
norfolkguyuk
norfolkguyuk's picture
Offline
newbie
Last seen: 4 years 32 weeks ago
Timezone: GMT+1
Joined: 2013-01-26
Posts: 4
Points: 6

Hey All,

I'm trying to make a table of rows and columns using divs.

I've got this on my page:

<div style="width: 898px; border: 1px solid #a6a8ab; margin: 0 auto; padding:0;"><div class="domaintld">.wales</div><div class="pricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div><div class="domaintld">.cymru</div><div class="pricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.cymru&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div><div class="smalldomaintld">.info</div><div class="smallpricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.info&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div><div class="smalldomaintld">.be</div><div class="smallpricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.be&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div>
<br>
<div class="domaintld">.uk</div><div class="pricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.uk&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div><div class="domaintld">.org.uk</div><div class="pricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.org.uk&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div><div class="smalldomaintld">.es</div><div class="smallpricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.es&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div><div class="smalldomaintld">.pm</div><div class="smallpricefeed"><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.pm&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></div>
</div>

and this is my css:

.smalldomaintld 
{
   color: #333333;
   font-size:14px;
   width: 40px;
   float:left;
}
 
.smallpricefeed
{
   color: #3499ff;
   font-size:14px;
   width: 40px;
   float:left;
}
 
.domaintld 
{
   color: #333333;
   font-size:20px;
   width: 70px;
   float:left;
}
 
.pricefeed
{
   color: #3499ff;
   font-size:20px;
   width: 70px;
   float:left;
}

but my second line of divs is displaying next to the first line, but slightly lower...
What have I missed?

webecho
webecho's picture
Offline
newbie
Deep down under
Last seen: 4 years 22 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2007-02-09
Posts: 8
Points: 10

Adding 1 more <br> solves the

Adding 1 more <br> solves the problem but it's not a very nice way to do it.

Try this instead, a lot cleaner:

CSS:

.new{width:600px;}
.new ul li{float:left;width:20%;margin-right:5%;}
.new ul li span{float:right;}
.new ul:after {content: "."; display: block;height: 0;clear: both;visibility: hidden;}

You can easily change margins / spacing etc
HTML

<div class="new">
<ul>
    <li>.wales <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
    <li>.cymru <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.cymru&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
    <li>.info <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
    <li>.be <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
</ul> 
<ul>
    <li>.uk <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
    <li>.org.uk <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
    <li>.es <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
    <li>.pm <span><script src="https://secure.totallytech.it/feeds/domainprice.php?tld=.wales&amp;type=register&amp;regperiod=1&amp;currency=1&amp;format=1" language="javascript"></script></span></li>
</ul> 
</div>

I didn't bother with colouring things and all the feeds are the same one, but just add the colour to the span and you'll be right.

hth

@webecho