CSS Positioning is going to make me CRAZY!

Discussion in 'HTML' started by Noozer, Dec 19, 2004.

  1. Noozer

    Noozer Guest

    With the sample code below, the "results" div will wrap below the "search"
    div if it is longer that the "search" div.

    The content of these two divs is dynamic so I cannot make the a set width or
    height.

    How can I ensure that my "results" div does not go below my "search" div?

    <div id="container">
    <div id="search" style="float: left">
    <!-- SOME ASP CODE HERE -->
    <input type="text" name="key">
    <input type="submit" value="Submit">
    </div>
    <div id="results">
    <span class="heading">Search Results</span>
    <!-- ASP CODE TO DISPLAY RESULTS HERE -->
    </div>
    </div>
    <div id="edit">
    <!-- MORE ASP GENERATED HTML -->
    </div>
     
    Noozer, Dec 19, 2004
    #1
    1. Advertising

  2. Noozer

    Richard Guest

    Noozer wrote:

    > With the sample code below, the "results" div will wrap below the "search"
    > div if it is longer that the "search" div.


    > The content of these two divs is dynamic so I cannot make the a set width
    > or height.


    > How can I ensure that my "results" div does not go below my "search" div?


    > <div id="container">
    > <div id="search" style="float: left">
    > <!-- SOME ASP CODE HERE -->
    > <input type="text" name="key">
    > <input type="submit" value="Submit">
    > </div>
    > <div id="results">
    > <span class="heading">Search Results</span>
    > <!-- ASP CODE TO DISPLAY RESULTS HERE -->
    > </div>
    > </div>
    > <div id="edit">
    > <!-- MORE ASP GENERATED HTML -->
    > </div>


    define "container" with a width and height for one.
    "search" then should have a definitive width and height as well.
     
    Richard, Dec 19, 2004
    #2
    1. Advertising

  3. in alt.html, Noozer wrote:
    > With the sample code below, the "results" div will wrap below the "search"
    > div if it is longer that the "search" div.


    Aha

    > The content of these two divs is dynamic so I cannot make the a set width or
    > height.


    Aha, so provide examples for both.

    > How can I ensure that my "results" div does not go below my "search" div?


    Don't put your search field above results? How about URL? Maybe you could
    describe what you would like to happen?

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
     
    Lauri Raittila, Dec 19, 2004
    #3
  4. Noozer

    Kris Guest

    In article <>,
    "Richard" <Anonymous@127.001> wrote:

    > "search" then should have a definitive width and height as well.


    What if the text inside is larger than the designer anticipated?

    --
    Kris
    <> (nl)
     
    Kris, Dec 19, 2004
    #4
  5. Noozer

    rf Guest

    Noozer

    > With the sample code below, the "results" div will wrap below the "search"
    > div if it is longer that the "search" div.
    >
    > The content of these two divs is dynamic so I cannot make the a set width

    or
    > height.
    >
    > How can I ensure that my "results" div does not go below my "search" div?


    <snip code>

    Give the results div a left margin equal to the width of the search div.

    --
    Cheers
    Richard.
     
    rf, Dec 19, 2004
    #5
  6. Noozer

    Noozer Guest

    "Kris" <> wrote in message
    news:4all.nl...
    > In article <>,
    > "Richard" <Anonymous@127.001> wrote:
    >
    > > "search" then should have a definitive width and height as well.

    >
    > What if the text inside is larger than the designer anticipated?


    And that's my problem... 95% of the page is generated dynamically. I do not
    know how wide or tall any of the content will be.

    I want a column on the left side that is wide enough to hold it's content.

    To the right of this I want another "column" that is wide enough to hold
    it's content. This second column can go off the right side of the screen if
    necessary. I do not want any of this second column to appear below the first
    column.

    Below these two columns I want a third area. I want the top of this third
    area to start at the lowest point of the two columns above.

    <div id="container">
    <div id="search">
    </div>
    <div id="results">
    </div>
    </div>
    <div id="edit">
    </div>

    If I float the container or search DIV, it is no longer contained within the
    container DIV.

    Also if the search DIV is not as tall as the results DIV, the results DIV
    will appear below the search DIV. I want the search DIV to be blank below it
    if it isn't as tall as the results DIV.

    At this point I think I'll just use tables... I hate them, but at least they
    are predictable.

    Thanks!





    PS ..and no I don't have a sample on the internet.
     
    Noozer, Dec 20, 2004
    #6
  7. Noozer

    Noozer Guest

    "rf" <rf@.invalid> wrote in message
    news:dHnxd.79282$...
    > Noozer
    >
    > > With the sample code below, the "results" div will wrap below the

    "search"
    > > div if it is longer that the "search" div.
    > >
    > > The content of these two divs is dynamic so I cannot make the a set

    width
    > or
    > > height.
    > >
    > > How can I ensure that my "results" div does not go below my "search"

    div?
    >
    > <snip code>
    >
    > Give the results div a left margin equal to the width of the search div.


    How is this done if you don't know the width of the search div at design
    time?
     
    Noozer, Dec 20, 2004
    #7
  8. Noozer

    rf Guest

    Noozer wrote:

    > > Give the results div a left margin equal to the width of the search div.

    >
    > How is this done if you don't know the width of the search div at design
    > time?


    You do. It is a certain number of ems wide.

    --
    Cheers
    Richard.
     
    rf, Dec 20, 2004
    #8
    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. Navin
    Replies:
    3
    Views:
    669
    Navin
    Jul 28, 2003
  2. Jay Douglas
    Replies:
    0
    Views:
    421
    Jay Douglas
    Aug 28, 2003
  3. Larry Tate

    getting confused and going crazy

    Larry Tate, Dec 21, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    512
    Larry Tate
    Dec 21, 2003
  4. Miguel Dias Moura
    Replies:
    7
    Views:
    493
    Miguel Dias Moura
    Sep 28, 2004
  5. sklett

    going crazy? files won't update

    sklett, Mar 23, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    387
    sklett
    Mar 23, 2005
Loading...

Share This Page