How do you put two spans on top of each other

Discussion in 'HTML & Website Design' started by brianstewey, Apr 23, 2009.

0
  1. #1
    Hello,
    I have 4 span sections running across a page. Visually like below -
    SPAN SPAN SPAN SPAN

    In the third SPAN section I want to have a span immediately below. I want to do this without having massive padding or margins on the line below or without absolute positioning.
    Conceptually -
    SPAN SPAN SPAN SPAN
    ................SPAN

    NOTE ..... = white space

    I have tried enclosing the two verticals SPANS in a SPAN with a <BR> but that of ruins it.

    Any ideas?
    (cheers ppl)
     
    brianstewey, Apr 23, 2009 IP
  2. pPaul

    pPaul Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you dont want to float left (or right) with padding, mabye use 
    position: absolute
    Code (markup):
    to take the span out of the document flow and place it exactly where you want it.
     
    pPaul, Apr 24, 2009 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Why don't you tell us what you're trying to do rather than how you're trying to do it? You may be asking about the wrong 'how'.

    cheers,

    gary
     
    kk5st, Apr 24, 2009 IP
  4. designgenerator

    designgenerator Guest

    Messages:
    118
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    designgenerator, Apr 24, 2009 IP
  5. brianstewey

    brianstewey Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I am trying to put a line of labels with corresponding input across a div container-
    <p> <INPUT> <p> <INPUT> <p> <INPUT> <p> <INPUT>

    eg. <p> = Country <INPUT> = Text

    For the third line, I want to ask for a similar input directly below the third one.
    eg.
    <p> <INPUT> <p> <INPUT> <p> <INPUT> <p> <INPUT>
    ......................................<p> <INPUT>

    Hope that helps
    Cheers
     
    brianstewey, Apr 25, 2009 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Yep! That makes a difference. The first step is to use semantic markup. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />

  <title></title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/

fieldset {
    overflow: hidden;
    }

fieldset p {
    float: left;
    width: 24.5%;
    }

  /*]]>*/
  </style>

</head>

<body>
  <form action="#"
        method="get">
    <fieldset><legend>input group</legend>
      <p><label for="input1">label 1:&nbsp;<input type="text"
             value="input 1"
             name="input1"
             id="input1"
             size="15" /></label></p>

      <p><label for="input2">label 2:&nbsp;<input type="text"
             value="input 2"
             name="input2"
             id="input2"
             size="15" /></label></p>

      <p><label for="input3">label 3:&nbsp;<input type="text"
             value="input 3"
             name="input3"
             id="input1"
             size="15" /></label>

      <br />
      <label for="input5">label 5:&nbsp;<input type="text"
             value="input 5"
             name="input5"
             id="input5"
             size="15" /></label></p>

      <p><label for="input4">label 4:&nbsp;<input type="text"
             value="input 4"
             name="input4"
             id="input4"
             size="15" /></label></p>
    </fieldset>
  </form>
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Apr 25, 2009 IP
  7. brianstewey

    brianstewey Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Nice one. I have always wondered what the fieldset tag did. Solution works perfect.
    cheers.
    :)
     
    brianstewey, Apr 26, 2009 IP