Samuel Denty Samuel Denty - 3 months ago 16
CSS Question

Form not staying next to buttons

I'm designing a footer on a HTML webpage with a radio-selection form on it. I have some buttons inside the footers div, centered using

<center>
. Without the form on it, it works 100%. I can't get the form to display next to the other buttons, without using
float: right;
in the stylesheet. When I use float, it is inconsistently dynamic with the rest of the buttons in the div. I've tried setting fixed heights, but I want it to be dynamic. So how can I get the form to display next the the links, in the same way that the links display next to each other?

JSFiddle: https://jsfiddle.net/o78s2s18/




Diagram:

Diagram

Answer

You could put both groups of elements inside their own <div> and float them both to the left.

<div style="float:left;">
    <a id="BtnStyle" href="example.com">10&nbsp;Views</a>
    <a id="BtnStyle" href="http://mirum.weebly.com/">About</a>
    <a id="BtnStyle" href="http://SD-Storage.weebly.com/#MirumFooter">SD-Storage</a>
</div>
<div style="float:left">
    <form action="#" width="200px" class="ThemeSelector">
        <input name="group1" type="radio" id="test1" class="red" />
        <label for="test1">Test 1</label>
        <br>
        <input name="group1" type="radio" id="test2" class="red" />
        <label for="test2">Test 2</label>
    </form>
</div>

Here's an example