.NET horizontal layout question

Discussion in 'ASP .Net' started by Axel, Mar 25, 2009.

  1. Axel

    Axel Guest

    hello I have managed to get 3 areas aligned beside each other, like this

    AREA1 AREA2 AREA3

    I originally wanted to use Panel control but they always displayed on
    top of each other.

    The CSS that I am using is this:

    div.hpanel
    {
    display: inline-block;
    vertical-align:top;
    background-color: Yellow !important;
    border: solid 2px White;
    padding-right:15px;
    margin-right: 5px;
    }

    (background and border for testing purposes only

    AREA1
    GroupPanel:Sort By-
    | o Priority |
    | o Account |
    ------------------


    AREA2
    <p>Number of Recs: <label/></p>
    <p>Account list: <dropdown/></p>

    AREA3
    <p>Comment:<BR>
    <TextBox multiline>
    </p>


    So I tried this
    <div>
    <div class=hpanel>
    AREA1
    </div>
    <div class=hpanel>
    AREA2
    </div>
    <div class=hpanel>
    AREA3
    </div>
    </div>

    In Firefox (3.0) they are shown as expected, blocks in a line:
    http://tinyurl.com/dyeqkc

    In IE7 they all stretch over the container of the outmost div (a TD from
    the master page) and are shown underneath each other:
    http://tinyurl.com/djzyzh

    Any idea how to fix this? Would display: table-row (container) and
    table-cell (areas) help at all? Is there maybe something built into IE
    that makes all divs stretch to 100% of their container by default?

    thanks in advance
    Axel
     
    Axel, Mar 25, 2009
    #1
    1. Advertising

  2. Axel

    Axel Guest

    Re: .NET horizontal layout question (SOLUTION)

    this markup works:

    div.hbox
    {
    border: dotted 1px Gray; /* layout test */
    -moz-border-radius: 3px; /* layout test */
    text-align: left;
    Width: 100%;
    margin-bottom: 5px;
    }
    div.hpanel
    {
    border: dotted 1px #CCC; /* layout test */
    -moz-border-radius: 2px; /* layout test */
    display: inline-block;
    padding-left:5px;
    margin-right: 5px;
    vertical-align:top;
    /* ie7 quirk for toggling hasLayout and inline-block! */
    zoom:1.0; *display: inline;
    }

    html:

    <div class="hbox">
    <div class="hpanel">
    AREA1
    <div>
    <div class="hpanel">
    AREA2
    <div>
    <div class="hpanel">
    AREA3
    <div>
    </div>


    will display as

    ______ _______ _______
    |AREA1| |AREA2| |AREA3|
    ------ ------- -------

    cheers
    Axel

    Axel wrote:
    > hello I have managed to get 3 areas aligned beside each other, like this
    >
    > AREA1 AREA2 AREA3
    >
    > I originally wanted to use Panel control but they always displayed on
    > top of each other.
    >
    > The CSS that I am using is this:
    >
    > div.hpanel
    > {
    > display: inline-block;
    > vertical-align:top;
    > background-color: Yellow !important;
    > border: solid 2px White;
    > padding-right:15px;
    > margin-right: 5px;
    > }
    >
    > (background and border for testing purposes only
    >
    > AREA1
    > GroupPanel:Sort By-
    > | o Priority |
    > | o Account |
    > ------------------
    >
    >
    > AREA2
    > <p>Number of Recs: <label/></p>
    > <p>Account list: <dropdown/></p>
    >
    > AREA3
    > <p>Comment:<BR>
    > <TextBox multiline>
    > </p>
    >
    >
    > So I tried this
    > <div>
    > <div class=hpanel>
    > AREA1
    > </div>
    > <div class=hpanel>
    > AREA2
    > </div>
    > <div class=hpanel>
    > AREA3
    > </div>
    > </div>
    >
    > In Firefox (3.0) they are shown as expected, blocks in a line:
    > http://tinyurl.com/dyeqkc
    >
    > In IE7 they all stretch over the container of the outmost div (a TD from
    > the master page) and are shown underneath each other:
    > http://tinyurl.com/djzyzh
    >
    > Any idea how to fix this? Would display: table-row (container) and
    > table-cell (areas) help at all? Is there maybe something built into IE
    > that makes all divs stretch to 100% of their container by default?
    >
    > thanks in advance
    > Axel
     
    Axel, Mar 26, 2009
    #2
    1. Advertising

  3. Axel

    JM Guest

    Re: .NET horizontal layout question (SOLUTION)

    > this markup works:

    Axel,

    Which browsers does this work with?

    And, why wouldn't you just use a horizontal UL instead?

    John
     
    JM, Mar 28, 2009
    #3
  4. Axel

    imransyed63

    Joined:
    May 16, 2006
    Messages:
    27
    You can use span instead of div
     
    imransyed63, Mar 29, 2009
    #4
  5. Axel

    K Viltersten Guest

    Re: .NET horizontal layout question (SOLUTION)

    > div.hpanel
    > {
    > border: dotted 1px #CCC; /* layout test */
    > -moz-border-radius: 2px; /* layout test */
    > display: inline-block;
    > padding-left:5px;
    > margin-right: 5px;
    > vertical-align:top;
    > /* ie7 quirk for toggling hasLayout and inline-block! */
    > zoom:1.0; *display: inline;
    > }


    My VS compains that "inline-block" is not a valid
    for "display" according to CSS 2.0... What's up
    with that? It gives me "inline" and "block" as
    available options but not both at the same time...

    --
    Regards
    K Viltersten
     
    K Viltersten, Mar 29, 2009
    #5
  6. Re: .NET horizontal layout question (SOLUTION)

    re:
    !> My VS compains that "inline-block" is not
    !> a valid for "display" according to CSS 2.0.

    "inline-block" was introduced in CSS 2.1.

    See :

    http://www.w3.org/TR/CSS21/propidx.html

    Look for "display" in the leftmost column, and you'll see inline-block as a valid value.



    Juan T. Llibre, asp.net MVP
    asp.net faq : http://asp.net.do/faq/
    =========================
    "K Viltersten" <> wrote in message news:...
    >> div.hpanel
    >> {
    >> border: dotted 1px #CCC; /* layout test */
    >> -moz-border-radius: 2px; /* layout test */
    >> display: inline-block;
    >> padding-left:5px;
    >> margin-right: 5px;
    >> vertical-align:top;
    >> /* ie7 quirk for toggling hasLayout and inline-block! */
    >> zoom:1.0; *display: inline;
    >> }

    >
    > My VS compains that "inline-block" is not a valid for "display" according to CSS 2.0... What's up with that? It gives
    > me "inline" and "block" as available options but not both at the same time...
    >
    > --
    > Regards
    > K Viltersten
     
    Juan T. Llibre, Mar 30, 2009
    #6
  7. Axel

    K Viltersten Guest

    Re: .NET horizontal layout question (SOLUTION)

    Thanks! For some reason my VS2008 doesn't know it...

    --
    Regards
    K Viltersten




    "Juan T. Llibre" <> wrote in message
    news:...
    > re:
    > !> My VS compains that "inline-block" is not
    > !> a valid for "display" according to CSS 2.0.
    >
    > "inline-block" was introduced in CSS 2.1.
    >
    > See :
    >
    > http://www.w3.org/TR/CSS21/propidx.html
    >
    > Look for "display" in the leftmost column, and you'll see inline-block as
    > a valid value.
    >
    >
    >
    > Juan T. Llibre, asp.net MVP
    > asp.net faq : http://asp.net.do/faq/
    > =========================
    > "K Viltersten" <> wrote in message
    > news:...
    >>> div.hpanel
    >>> {
    >>> border: dotted 1px #CCC; /* layout test */
    >>> -moz-border-radius: 2px; /* layout test */
    >>> display: inline-block;
    >>> padding-left:5px;
    >>> margin-right: 5px;
    >>> vertical-align:top;
    >>> /* ie7 quirk for toggling hasLayout and inline-block! */
    >>> zoom:1.0; *display: inline;
    >>> }

    >>
    >> My VS compains that "inline-block" is not a valid for "display" according
    >> to CSS 2.0... What's up with that? It gives me "inline" and "block" as
    >> available options but not both at the same time...
    >>
    >> --
    >> Regards
    >> K Viltersten

    >
    >
    >
     
    K Viltersten, Mar 30, 2009
    #7
    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. Rick Spiewak
    Replies:
    3
    Views:
    3,178
    Rick Spiewak
    Aug 26, 2003
  2. RobertH
    Replies:
    1
    Views:
    738
    Steve C. Orr [MVP, MCSD]
    Nov 4, 2003
  3. NWx
    Replies:
    4
    Views:
    2,983
    Kevin Spencer
    Feb 19, 2004
  4. Eric
    Replies:
    4
    Views:
    749
    clintonG
    Dec 24, 2004
  5. Replies:
    1
    Views:
    603
    John Timney \(MVP\)
    Jun 19, 2006
Loading...

Share This Page