How to put elements next to each other horizontally

Discussion in 'HTML' started by Cristian, Nov 26, 2007.

  1. Cristian

    Cristian Guest

    I have this div for the top of my page. Nested into it, I have a
    heading and another div. How can I make that heading and div stand
    next to each other horizontally?
    I have tried turning them into inline elements, but always one appear
    in the top and the other in the bottom of it. I have used floats,
    unsuccessfully.
    The home page of Inkscape - http://inkscape.org/ - sets a heading
    next to a div just the way I want it. I have looked into their CSS
    file and tried to do the same, however, I think my knowledge is too
    limited at this moment. Could anyone explain me how to do that?
    Not sure if it works, but I have this example of the HTML I am using.

    <body>
    <div id="all">

    <h1>Heading</h1>

    <div id="right">
    <p>Paragraph</p>
    </div>

    </div>
    </body>
    Cristian, Nov 26, 2007
    #1
    1. Advertising

  2. Cristian

    dorayme Guest

    In article
    <
    m>,
    Cristian <> wrote:

    > I have this div for the top of my page. Nested into it, I have a
    > heading and another div. How can I make that heading and div stand
    > next to each other horizontally?
    > I have tried turning them into inline elements, but always one appear
    > in the top and the other in the bottom of it. I have used floats,
    > unsuccessfully.
    > The home page of Inkscape - http://inkscape.org/ - sets a heading
    > next to a div just the way I want it. I have looked into their CSS
    > file and tried to do the same, however, I think my knowledge is too
    > limited at this moment. Could anyone explain me how to do that?
    > Not sure if it works, but I have this example of the HTML I am using.
    >
    > <body>
    > <div id="all">
    >
    > <h1>Heading</h1>
    >
    > <div id="right">
    > <p>Paragraph</p>
    > </div>
    >
    > </div>
    > </body>


    Is this the sort of effect you want:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <style type="text/css" media="all">
    p {margin-left: 10em; font-size: 1em;}
    h1 {float:left; width: 5em; font-size: 2em;}
    </style>
    </head>
    <body>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
    nec orci quis nulla egestas fermentum.Ut quis eros. Aenean at
    augue vitae quam posuere vehicula. Pellentesque habitantmorbi
    tristique senectus et netus et malesuada fames ac turpis egestas.
    Maecenas justonunc, porta sed, molestie eget, adipiscing id,
    ante. Cum sociis natoque penatibus etmagnis dis parturient
    montes, nascetur ridiculus mus. Suspendisse potenti. Nunc
    blanditmagna id odio sodales luctus. Nulla quam magna, viverra
    quis, dignissim blandit, viverra nec, odio.</p>
    </body>
    </html>

    ?

    There are some nice issues here.

    --
    dorayme
    dorayme, Nov 26, 2007
    #2
    1. Advertising

  3. Cristian

    kailash nadh Guest

    On Nov 26, 4:01 am, Cristian <> wrote:
    > I have this div for the top of my page. Nested into it, I have a
    > heading and another div. How can I make that heading and div stand
    > next to each other horizontally?
    > I have tried turning them into inline elements, but always one appear
    > in the top and the other in the bottom of it. I have used floats,
    > unsuccessfully.
    > The home page of Inkscape -http://inkscape.org/- sets a heading
    > next to a div just the way I want it. I have looked into their CSS
    > file and tried to do the same, however, I think my knowledge is too
    > limited at this moment. Could anyone explain me how to do that?
    > Not sure if it works, but I have this example of the HTML I am using.
    >
    > <body>
    > <div id="all">
    >
    > <h1>Heading</h1>
    >
    > <div id="right">
    > <p>Paragraph</p>
    > </div>
    >
    > </div>
    > </body>


    Give the h1 and #right widths and try floating them (if you fail to
    give proper widths, the elements won't float). Example css.
    <style type="text/css">
    <!--
    #all h1 {
    width: 40%;
    float: left;
    }
    #all #right {
    width: 40%;
    float: left;
    }
    //-->
    </style>
    kailash nadh, Nov 26, 2007
    #3
  4. Cristian

    rf Guest

    "kailash nadh" <> wrote in message
    news:...
    > On Nov 26, 4:01 am, Cristian <> wrote:


    > Give the h1 and #right widths and try floating them (if you fail to
    > give proper widths, the elements won't float).


    Nope. They will float. If you fail to give them width the the width defaults
    to auto and the used value is the "shrink-to-fit" width.

    --
    Richard.
    rf, Nov 26, 2007
    #4
    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. John Dalberg
    Replies:
    0
    Views:
    494
    John Dalberg
    Jan 19, 2007
  2. Deniz Bahar
    Replies:
    2
    Views:
    451
    Andrey Tarasevich
    Mar 9, 2005
  3. jc
    Replies:
    2
    Views:
    841
    Eliyahu Goldin
    Mar 20, 2008
  4. Axel
    Replies:
    9
    Views:
    5,488
  5. Jason Caid
    Replies:
    0
    Views:
    112
    Jason Caid
    Sep 7, 2005
Loading...

Share This Page