div in div position

Discussion in 'HTML' started by Tarscher, Aug 6, 2007.

  1. Tarscher

    Tarscher Guest

    hi all,

    This question is probably already answered a zillion times but I
    cannot find an answer to my question.

    I have a div in a div
    <div>
    DIV1 text
    <div>
    DIV 2 Text
    </div>
    </div>

    Is it possible to position the divs that the text from div 2 is next
    to the text of div 1?

    I get
    DIV1 text
    DIV 2 text

    but want
    DIV1 textDIV 2 text

    Many thanks
    Stijn
     
    Tarscher, Aug 6, 2007
    #1
    1. Advertising

  2. Tarscher

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    Tarscher scribed:

    > hi all,
    >
    > This question is probably already answered a zillion times but I
    > cannot find an answer to my question.
    >
    > I have a div in a div
    > <div>
    > DIV1 text
    > <div>
    > DIV 2 Text
    > </div>
    > </div>
    >
    > Is it possible to position the divs that the text from div 2 is next
    > to the text of div 1?
    >
    > I get
    > DIV1 text
    > DIV 2 text
    >
    > but want
    > DIV1 textDIV 2 text
    >
    > Many thanks
    > Stijn


    Use floats.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
     
    Neredbojias, Aug 6, 2007
    #2
    1. Advertising

  3. Neredbojias wrote:
    > Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    > Tarscher scribed:
    >
    >> hi all,
    >>
    >> This question is probably already answered a zillion times but I
    >> cannot find an answer to my question.
    >>
    >> I have a div in a div
    >> <div>
    >> DIV1 text
    >> <div>
    >> DIV 2 Text
    >> </div>
    >> </div>
    >>
    >> Is it possible to position the divs that the text from div 2 is next
    >> to the text of div 1?
    >>
    >> I get
    >> DIV1 text
    >> DIV 2 text
    >>
    >> but want
    >> DIV1 textDIV 2 text
    >>
    >> Many thanks
    >> Stijn

    >
    > Use floats.
    >


    Or don't use DIV use a SPAN. Depends on what you are trying to do. An
    example URL of the real page might help.



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 6, 2007
    #3
  4. Tarscher

    Tarscher Guest

    On 6 aug, 14:19, "Jonathan N. Little" <> wrote:
    > Neredbojias wrote:
    > > Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    > > Tarscher scribed:

    >
    > >> hi all,

    >
    > >> This question is probably already answered a zillion times but I
    > >> cannot find an answer to my question.

    >
    > >> I have a div in a div
    > >> <div>
    > >> DIV1 text
    > >> <div>
    > >> DIV 2 Text
    > >> </div>
    > >> </div>

    >
    > >> Is it possible to position the divs that the text from div 2 is next
    > >> to the text of div 1?

    >
    > >> I get
    > >> DIV1 text
    > >> DIV 2 text

    >
    > >> but want
    > >> DIV1 textDIV 2 text

    >
    > >> Many thanks
    > >> Stijn

    >
    > > Use floats.

    >
    > Or don't use DIV use a SPAN. Depends on what you are trying to do. An
    > example URL of the real page might help.
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    I've made a mockup of what and why I want to do achieve.You can find
    it here: http://www.flickr.com/photos/11036025@N03/1027802383/

    I hope this clarifies things.

    Regards,
    Stijn
     
    Tarscher, Aug 6, 2007
    #4
  5. Tarscher wrote:
    > On 6 aug, 14:19, "Jonathan N. Little" <> wrote:
    >> Neredbojias wrote:
    >>> Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    >>> Tarscher scribed:
    >>>> hi all,
    >>>> This question is probably already answered a zillion times but I
    >>>> cannot find an answer to my question.
    >>>> I have a div in a div
    >>>> <div>
    >>>> DIV1 text
    >>>> <div>
    >>>> DIV 2 Text
    >>>> </div>
    >>>> </div>
    >>>> Is it possible to position the divs that the text from div 2 is next
    >>>> to the text of div 1?
    >>>> I get
    >>>> DIV1 text
    >>>> DIV 2 text
    >>>> but want
    >>>> DIV1 textDIV 2 text
    >>>> Many thanks
    >>>> Stijn
    >>> Use floats.

    >> Or don't use DIV use a SPAN. Depends on what you are trying to do. An
    >> example URL of the real page might help.
    >>


    <You should snip signatures>

    > I've made a mockup of what and why I want to do achieve.You can find
    > it here: http://www.flickr.com/photos/11036025@N03/1027802383/
    >
    > I hope this clarifies things.


    Clear as mud. An example page of HTML of what you are trying would be
    preferable.

    1) "DIV 2 should start where text of DIV 1 stops" Do you mean DIV 1's
    line of text should define the left position of DIV 2? Or is DIV 1 to
    have a static width?

    2) are both DIVs dims to be defined by the contents or do you have
    dimensions for both?

    3) Are they to have the same height?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <title>Who knows!</title>

    <style type="text/css">
    ..container {
    margin: .5em; padding: .5em 9.5em .5em .5em; border: 1px solid black;
    color: #000; background-color: #ccc;
    position: relative;

    /* NOT SURE IF YOU NEED STATIC DIMS */
    width: 8em;

    height: 20em;

    overflow: hidden;
    }

    ..container div {
    margin: .5em; padding: .5em; border: 1px solid black;
    color: #000; background-color: #ccf;
    position: absolute;
    top: 0; right: 0;
    width: 8em; height: 19em;

    }


    </style>
    </head>
    <body>

    <div class="container">
    DIV 1 text
    (but as you can see we cannot advise unless we have a clearer idea of
    what you really want to accomplish)
    <div>DIV 2 Text</div>
    </div>
    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 6, 2007
    #5
  6. Tarscher

    Tarscher Guest

    On 6 aug, 16:31, "Jonathan N. Little" <> wrote:
    > Tarscherwrote:
    > > On 6 aug, 14:19, "Jonathan N. Little" <> wrote:
    > >> Neredbojias wrote:
    > >>> Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    > >>>Tarscherscribed:
    > >>>> hi all,
    > >>>> This question is probably already answered a zillion times but I
    > >>>> cannot find an answer to my question.
    > >>>> I have a div in a div
    > >>>> <div>
    > >>>> DIV1 text
    > >>>> <div>
    > >>>> DIV 2 Text
    > >>>> </div>
    > >>>> </div>
    > >>>> Is it possible to position the divs that the text from div 2 is next
    > >>>> to the text of div 1?
    > >>>> I get
    > >>>> DIV1 text
    > >>>> DIV 2 text
    > >>>> but want
    > >>>> DIV1 textDIV 2 text
    > >>>> Many thanks
    > >>>> Stijn
    > >>> Use floats.
    > >> Or don't use DIV use a SPAN. Depends on what you are trying to do. An
    > >> example URL of the real page might help.

    >
    > <You should snip signatures>
    >
    > > I've made a mockup of what and why I want to do achieve.You can find
    > > it here:http://www.flickr.com/photos/11036025@N03/1027802383/

    >
    > > I hope this clarifies things.

    >
    > Clear as mud. An example page of HTML of what you are trying would be
    > preferable.
    >
    > 1) "DIV 2 should start where text of DIV 1 stops" Do you mean DIV 1's
    > line of text should define the left position of DIV 2? Or is DIV 1 to
    > have a static width?
    >
    > 2) are both DIVs dims to be defined by the contents or do you have
    > dimensions for both?
    >
    > 3) Are they to have the same height?
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    > <meta http-equiv="content-language" content="en-us">
    > <title>Who knows!</title>
    >
    > <style type="text/css">
    > .container {
    > margin: .5em; padding: .5em 9.5em .5em .5em; border: 1px solid black;
    > color: #000; background-color: #ccc;
    > position: relative;
    >
    > /* NOT SURE IF YOU NEED STATIC DIMS */
    > width: 8em;
    >
    > height: 20em;
    >
    > overflow: hidden;
    >
    > }
    >
    > .container div {
    > margin: .5em; padding: .5em; border: 1px solid black;
    > color: #000; background-color: #ccf;
    > position: absolute;
    > top: 0; right: 0;
    > width: 8em; height: 19em;
    >
    > }
    >
    > </style>
    > </head>
    > <body>
    >
    > <div class="container">
    > DIV 1 text
    > (but as you can see we cannot advise unless we have a clearer idea of
    > what you really want to accomplish)
    > <div>DIV 2 Text</div>
    > </div>
    > </body>
    > </html>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Many thanks for the reply.

    Since I don't know how to implement the html I think it's better to
    show an image example.

    Jonathan : the example code you provider is almost perfect. An answer
    to your questions:
    1) Indeed. div2 should start where the text of div1 stops. The text
    of div1 will be a name and will have a maximum of 25 characters.
    2) Both divs are defined by it's content (which is dynamic, it's a
    scripted site). No fixed sizes thus.
    3) They don't have the same height. Div2 will contain a title and a
    list of names. The height is thus defined by the length of the list
    (which is dynamic)

    To summarize, the size of the divs is completely defined by the
    content (length of name in div1, length od list in div2) and thus
    should have no fixed values.

    I hope this clears the mud a little bit:)

    Many thanks again
     
    Tarscher, Aug 7, 2007
    #6
  7. Tarscher wrote:
    > On 6 aug, 16:31, "Jonathan N. Little" <> wrote:
    >> Tarscherwrote:
    >>> On 6 aug, 14:19, "Jonathan N. Little" <> wrote:
    >>>> Neredbojias wrote:
    >>>>> Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    >>>>> Tarscherscribed:
    >>>>>> hi all,
    >>>>>> This question is probably already answered a zillion times but I
    >>>>>> cannot find an answer to my question.
    >>>>>> I have a div in a div
    >>>>>> <div>
    >>>>>> DIV1 text
    >>>>>> <div>
    >>>>>> DIV 2 Text
    >>>>>> </div>
    >>>>>> </div>
    >>>>>> Is it possible to position the divs that the text from div 2 is next
    >>>>>> to the text of div 1?
    >>>>>> I get
    >>>>>> DIV1 text
    >>>>>> DIV 2 text
    >>>>>> but want
    >>>>>> DIV1 textDIV 2 text
    >>>>>> Many thanks
    >>>>>> Stijn
    >>>>> Use floats.
    >>>> Or don't use DIV use a SPAN. Depends on what you are trying to do. An
    >>>> example URL of the real page might help.

    >> <You should snip signatures>
    >>
    >>> I've made a mockup of what and why I want to do achieve.You can find
    >>> it here:http://www.flickr.com/photos/11036025@N03/1027802383/
    >>> I hope this clarifies things.

    >> Clear as mud. An example page of HTML of what you are trying would be
    >> preferable.
    >>
    >> 1) "DIV 2 should start where text of DIV 1 stops" Do you mean DIV 1's
    >> line of text should define the left position of DIV 2? Or is DIV 1 to
    >> have a static width?
    >>
    >> 2) are both DIVs dims to be defined by the contents or do you have
    >> dimensions for both?
    >>
    >> 3) Are they to have the same height?
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >> <html>
    >> <head>
    >> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    >> <meta http-equiv="content-language" content="en-us">
    >> <title>Who knows!</title>
    >>
    >> <style type="text/css">
    >> .container {
    >> margin: .5em; padding: .5em 9.5em .5em .5em; border: 1px solid black;
    >> color: #000; background-color: #ccc;
    >> position: relative;
    >>
    >> /* NOT SURE IF YOU NEED STATIC DIMS */
    >> width: 8em;
    >>
    >> height: 20em;
    >>
    >> overflow: hidden;
    >>
    >> }
    >>
    >> .container div {
    >> margin: .5em; padding: .5em; border: 1px solid black;
    >> color: #000; background-color: #ccf;
    >> position: absolute;
    >> top: 0; right: 0;
    >> width: 8em; height: 19em;
    >>
    >> }
    >>
    >> </style>
    >> </head>
    >> <body>
    >>
    >> <div class="container">
    >> DIV 1 text
    >> (but as you can see we cannot advise unless we have a clearer idea of
    >> what you really want to accomplish)
    >> <div>DIV 2 Text</div>
    >> </div>
    >> </body>
    >> </html>
    >>
    >> --
    >> Take care,
    >>
    >> Jonathan
    >> -------------------
    >> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

    >
    > Many thanks for the reply.
    >
    > Since I don't know how to implement the html I think it's better to
    > show an image example.
    >
    > Jonathan : the example code you provider is almost perfect. An answer
    > to your questions:
    > 1) Indeed. div2 should start where the text of div1 stops. The text
    > of div1 will be a name and will have a maximum of 25 characters.
    > 2) Both divs are defined by it's content (which is dynamic, it's a
    > scripted site). No fixed sizes thus.
    > 3) They don't have the same height. Div2 will contain a title and a
    > list of names. The height is thus defined by the length of the list
    > (which is dynamic)
    >
    > To summarize, the size of the divs is completely defined by the
    > content (length of name in div1, length od list in div2) and thus
    > should have no fixed values.
    >
    > I hope this clears the mud a little bit:)
    >
    > Many thanks again
    >
    >

    Is this a definition list, if so why not use markup as such and style
    anyway you wish...may need example *content* to understand fully what
    would be the best route...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 7, 2007
    #7
  8. Tarscher

    Tarscher Guest

    On 7 aug, 19:45, "Jonathan N. Little" <> wrote:
    > Tarscherwrote:
    > > On 6 aug, 16:31, "Jonathan N. Little" <> wrote:
    > >> Tarscherwrote:
    > >>> On 6 aug, 14:19, "Jonathan N. Little" <> wrote:
    > >>>> Neredbojias wrote:
    > >>>>> Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
    > >>>>> Tarscherscribed:
    > >>>>>> hi all,
    > >>>>>> This question is probably already answered a zillion times but I
    > >>>>>> cannot find an answer to my question.
    > >>>>>> I have a div in a div
    > >>>>>> <div>
    > >>>>>> DIV1 text
    > >>>>>> <div>
    > >>>>>> DIV 2 Text
    > >>>>>> </div>
    > >>>>>> </div>
    > >>>>>> Is it possible to position the divs that the text from div 2 is next
    > >>>>>> to the text of div 1?
    > >>>>>> I get
    > >>>>>> DIV1 text
    > >>>>>> DIV 2 text
    > >>>>>> but want
    > >>>>>> DIV1 textDIV 2 text
    > >>>>>> Many thanks
    > >>>>>> Stijn
    > >>>>> Use floats.
    > >>>> Or don't use DIV use a SPAN. Depends on what you are trying to do. An
    > >>>> example URL of the real page might help.
    > >> <You should snip signatures>

    >
    > >>> I've made a mockup of what and why I want to do achieve.You can find
    > >>> it here:http://www.flickr.com/photos/11036025@N03/1027802383/
    > >>> I hope this clarifies things.
    > >> Clear as mud. An example page of HTML of what you are trying would be
    > >> preferable.

    >
    > >> 1) "DIV 2 should start where text of DIV 1 stops" Do you mean DIV 1's
    > >> line of text should define the left position of DIV 2? Or is DIV 1 to
    > >> have a static width?

    >
    > >> 2) are both DIVs dims to be defined by the contents or do you have
    > >> dimensions for both?

    >
    > >> 3) Are they to have the same height?

    >
    > >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > >> "http://www.w3.org/TR/html4/strict.dtd">
    > >> <html>
    > >> <head>
    > >> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    > >> <meta http-equiv="content-language" content="en-us">
    > >> <title>Who knows!</title>

    >
    > >> <style type="text/css">
    > >> .container {
    > >> margin: .5em; padding: .5em 9.5em .5em .5em; border: 1px solid black;
    > >> color: #000; background-color: #ccc;
    > >> position: relative;

    >
    > >> /* NOT SURE IF YOU NEED STATIC DIMS */
    > >> width: 8em;

    >
    > >> height: 20em;

    >
    > >> overflow: hidden;

    >
    > >> }

    >
    > >> .container div {
    > >> margin: .5em; padding: .5em; border: 1px solid black;
    > >> color: #000; background-color: #ccf;
    > >> position: absolute;
    > >> top: 0; right: 0;
    > >> width: 8em; height: 19em;

    >
    > >> }

    >
    > >> </style>
    > >> </head>
    > >> <body>

    >
    > >> <div class="container">
    > >> DIV 1 text
    > >> (but as you can see we cannot advise unless we have a clearer idea of
    > >> what you really want to accomplish)
    > >> <div>DIV 2 Text</div>
    > >> </div>
    > >> </body>
    > >> </html>

    >
    > >> --
    > >> Take care,

    >
    > >> Jonathan
    > >> -------------------
    > >> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

    >
    > > Many thanks for the reply.

    >
    > > Since I don't know how to implement the html I think it's better to
    > > show an image example.

    >
    > > Jonathan : the example code you provider is almost perfect. An answer
    > > to your questions:
    > > 1) Indeed. div2 should start where the text of div1 stops. The text
    > > of div1 will be a name and will have a maximum of 25 characters.
    > > 2) Both divs are defined by it's content (which is dynamic, it's a
    > > scripted site). No fixed sizes thus.
    > > 3) They don't have the same height. Div2 will contain a title and a
    > > list of names. The height is thus defined by the length of the list
    > > (which is dynamic)

    >
    > > To summarize, the size of the divs is completely defined by the
    > > content (length of name in div1, length od list in div2) and thus
    > > should have no fixed values.

    >
    > > I hope this clears the mud a little bit:)

    >
    > > Many thanks again

    >
    > Is this a definition list, if so why not use markup as such and style
    > anyway you wish...may need example *content* to understand fully what
    > would be the best route...
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    You can find an example of what I want here: http://www.28edegem.be/tree.htm

    The div containing SelfMate should also encapsulate the other content
    (like shown in the image mockup). This has to be done since the divs
    are created dynamic via a scripted site.
    The div with Ploeg 1 has to start where Selfmate stops.

    I hope this is more clear now?

    Regards,
    Stijn
     
    Tarscher, Aug 9, 2007
    #8
  9. Tarscher wrote:

    > You can find an example of what I want here: http://www.28edegem.be/tree.htm
    >
    > The div containing SelfMate should also encapsulate the other content
    > (like shown in the image mockup). This has to be done since the divs
    > are created dynamic via a scripted site.
    > The div with Ploeg 1 has to start where Selfmate stops.
    >
    > I hope this is more clear now?


    1) Looks like a table!
    2) Don't use FONT element
    3) don't use empty <P></P> to space adjust the margins on the element
    4) don't use px for font sizes

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>By Table</title>

    <style type="text/css">

    /* drop oversized Verdana */
    body { font: 100% Geneva, Arial, Helvetica, sans-serif; }

    td { vertical-align: top; }
    td.club { font-size: 1.7em; color: #11dd11; }
    td.group { color: #555; }
    div.ploeg { font-size: 1.7em; color: #000; }
    td.group ol { margin: 0 0 1em 0; padding: 0; }
    td.group li { margin: 0; padding: 0; font-size: .8em;
    list-style-position: inside;}


    </style>

    </head>
    <body>
    <table>
    <tr>
    <td class="club">SelfMate</td>
    <td class="group">
    <div class="ploeg">Ploeg I</div>

    <div>Tak 1</div>
    <ol>
    <li>Jan Janssens</li>
    <li>Koen Koenen</li>
    <li>Frank franken</li>
    </ol>

    <div>Tak 2</div>
    <ol>
    <li>Jan Janssens</li>
    <li>Koen Koenen</li>
    <li>Frank franken</li>
    </ol>
    </td>
    </tr>
    </table>
    </body>
    </html>
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 9, 2007
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tamlyn Rhodes
    Replies:
    3
    Views:
    991
    Andy Dingley
    Feb 26, 2004
  2. Luigi Donatello Asero

    <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    31
    Views:
    1,204
    Toby Inkster
    May 7, 2006
  3. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    0
    Views:
    403
    Luigi Donatello Asero
    May 6, 2006
  4. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    1
    Views:
    427
    Luigi Donatello Asero
    May 6, 2006
  5. claudia
    Replies:
    2
    Views:
    2,221
    claudia
    Feb 28, 2010
Loading...

Share This Page