Floating a block of buttons

[benbob]

Is it possible to display a number of buttons as a block and "float" that block the same way as an image without using a table i.e. when the pages is zoomed in or out the text adjusts around the group of buttons instead around each button individually?
Thanks to the help found on this forum I now have some nice buttons working wonderfully, but when zoomed, the page looks hideous.

[TechnoBear]

If I've understood your question correctly, then you could wrap the group of buttons in a <div> and float that. As ever, a link or the relevant code would help.

[benbob]

This is my testpage; it is far from finished though it is readable so I've uploaded it and made it live. I don't thing Google mind if a page is altered 4 times a day, and with a bit of luck it will be indexed by the time it is finished. Sort of.
http://www.boiler-breakdown-repair-l...st-london.html

[ralph.m]

Presumably you mean the Home, waterleaks, gasleaks buttons ... As TB said, wrap 'em in a div a float it.

[benbob]

Following the advice below, I added a quick inline div to experiment and see what it looked like. test page

After two hours of searching, reading and experimenting, I am still no closer to understanding why the home and email button are below eachother, and the other two next to each other.
I could understand if they were all juxtaposed or all superposed, but only the first and the last vertically?


Ralph, indeed the 4 at the top "home, gas, water, email".

[TechnoBear]

You haven't added a width to your floated <div>, so it takes up the full widthof the parent container. Your links are also set to float:left, but you have a 55px margin on them, so there is only enough space for three horizontally, then the fourth one starts a new row, under the first one. Set a width on your <div> e.g. 200px, which will constrain each of your buttons to start on a new line and appear vertically. Better still, use a <ul> for your links.

<div style="float:clear-left ;width: 200px; ">
<ul>
<li><a class="button"  href="index.html">homepage</a></li>
<li><a class="button" href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html">waterleaks</a></li>
<li><a class="button"  href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html">gasleaks</a></li>
<li><a class="button" href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li>
<ul>
</div>

The <li> is a block element and each one will therefore start a new line naturally. You'll need to add list-style-type: none in your CSS to prevent bullet points displaying.

[benbob]

Many thanks again.