Removing the extra line between <div> tags?

Associate
Joined
18 Nov 2008
Posts
2,430
Location
Liverpool
Hi all, having a problem with having multiple <div> tags on one line.

The idea is, button followed by small gap followed by button etc. Each gap and space contained within a div tag (<div class="button"> and <div class="buttonspace">) so that each can be customised via CSS.

However, a line is added between each one, it's as if the end of a <div> tag is accompanied with an invisible <br>.

After googling, I was told using <span instead fixes it, but it didn't. I was also told using the inline thing fixes it, which it does, but it then ruins the formatting I want to use by restricting my ability to change the width.

In summary, help!

Example: www.cypherhosting.co.uk (Each white background represents a button, each yellow background represents spaces between them (Coloured this way to make them recognisable!).
 
display:inline; messes with the formatting, I'd tried that one, but floating both types of div left worked perfectly, thanks a lot!
 
Using extra divs for the gap is very bad practice IMO, you could just add a margin-right:5px; to the buttons?
 
Back
Top Bottom