Question 43129 in Html Question posted in
Some basic documentation can be found here.

How to make a label appear on the same line and floated to the right – Html

What currently happens:

<div title="Oscillator Parameters">
    <h3 style="margin-bottom:0px">Oscillator Parameters:</h3>

    <label for="oscFreq" style="float:left; display: inline;">Frequency: </label>
    <input class="field" id="oscFreq" value="10" style="float:left; width: 4em; margin-right:2px; display: block; clear: left">
    <p style="display: inline; float: left; margin-top: 0px" class="units">MHz</p>

    <label for="gSense" style="display: inline;clear: none;">G-Sense: </label>
    <p style="float: right; margin-bottom: 0px; clear: right;margin-top: 0px;" class="units">MHz</p>
    <input class="field" id="gSense" value="10" style="float:right; width: 4em; margin-right: 2px; display: block;">
                    
</div>

With the above code the elements look like this:
HTML elements

Adding float: right; to the G-sense label makes it look like this (doesn’t work):
HTML elements 2

What I want to do:
Make the G-sense label, field and units to appear the same as the frequency elements, but the G-sense elements must be on the right side.

How can I move them to the right?
Thanks

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Solved by converting the section into a grid and using that instead of float

    <div id="osc_params" title="Oscillator Parameters">
    <div id="title_osc_param">
        <h3 style="margin-bottom:0px">Oscillator Parameters:</h3>
    </div>
    <div id="osc_freq_grid">
        <label for="oscFreq" id="osc_freq_label">Frequency: </label>
        <input class="field" id="oscFreq">
        <p id="osc_freq_units" class="units">MHz</p>
    </div>
    <div style="grid-column: 2; grid-row: 2"><!--Empty Div for layout--></div>
    <div id="gsense_grid">
        <label for="gSense" id="gsense_label">G-Sense: </label>
        <p id="gsense_units" class="units">MHz</p>
        <input class="field" id="gSense">
    </div>
</div>

  2. 0

    Make the div position: relative and then the <label> style should be position:absolute and right: 0, maybe top: 0 too

    Login or Signup to reply.
  3. 0

    You can wrap label and input in a p if it has a semantic meaning:
    Why does the W3C advise wrapping input elements in <p> tags?

    <div title="Oscillator Parameters">
  <h3 style="margin-bottom: 0px">Oscillator Parameters:</h3>
  <p style="display: inline; float: left">
      <label for="gSense" style="display: block">Frequency: </label>
      <input class="field" id="oscFreq" value="10" style="float:left; 
       width: 4em; margin-right:2px; display: block; clear: left">Mhz
  </p>
  <p style="display: inline; float: right">
      <label for="gSense" style="display: block">G-Sense: </label>
      <input class="field" id="gSense" value="10" style="width: 4em; 
       margin-right: 2px" />Mhz
  </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search