<div style="display:inline;"> not behaving as expected

Discussion in 'ASP .Net' started by Steve Richter, May 28, 2007.

  1. I would like to use display:inline and other CSS attributes to build
    an entry form. Where the heading to the left of the text box is always
    a set width.

    It is not working so I am experimenting with two divs to get them to
    render side by side:

    <div style="width:12em;border: 2px solid #EFCE8C; padding:
    0.5em;display:inline;">abc</div>
    <div style="width:12em;border: 2px solid #EFCE8C; padding:
    0.5em;display:inline;">efg</div>

    the problem is, when the div style is inline:block the border draws
    correctly, 12 ems wide. When I set to display:inline the width:12em is
    ignored and the div width is the width of its contents.

    I want two divs side by side, the one on the left taking up 12ems of
    width space. Why does display:inline ignore the width attribute?
    Other than using a table or I guess the <label> tag, how can I achieve
    the left to right alignment I am looking for?

    thanks,

    -Steve
     
    Steve Richter, May 28, 2007
    #1
    1. Advertising

  2. ok, float: left gives the desired effect:

    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    margin-right:1em; padding:0.5em;display:inline;">abc</div>
    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    padding:0.5em;display:inline;">efg</div>

    problem is, when I use float:left I cant <br/> to a new line!
    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    margin-right:1em; padding:0.5em;display:inline;">abc</div>
    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    padding:0.5em;display:inline;">efg</div>
    <br/>
    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    margin-right:1em; padding:0.5em;display:inline;">abc</div>
    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    padding:0.5em;display:inline;">efg</div>

    this renders as 4 boxes across the line. What I am finding is as long
    as I use float:left, display:block is ignored and the Divs render as
    if display:inline is used.

    Looking for a rational understanding of CSS. is that possible?

    -Steve
     
    Steve Richter, May 29, 2007
    #2
    1. Advertising

  3. On May 28, 7:26 pm, Steve Richter <> wrote:
    > ok, float: left gives the desired effect:
    >
    > <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    > margin-right:1em; padding:0.5em;display:inline;">abc</div>
    > <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    > padding:0.5em;display:inline;">efg</div>
    >
    > problem is, when I use float:left I cant <br/> to a new line!
    > <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    > margin-right:1em; padding:0.5em;display:inline;">abc</div>
    > <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    > padding:0.5em;display:inline;">efg</div>
    > <br/>
    > <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    > margin-right:1em; padding:0.5em;display:inline;">abc</div>
    > <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    > padding:0.5em;display:inline;">efg</div>
    >
    > this renders as 4 boxes across the line. What I am finding is as long
    > as I use float:left, display:block is ignored and the Divs render as
    > if display:inline is used.
    >
    > Looking for a rational understanding of CSS. is that possible?
    >
    > -Steve



    a combination of float:left, float:none and display:block seems to do
    the trick:

    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    margin-right:1em; padding:0.5em;display:block;">abc</div>
    <div style="float:none; width:12em;border: 2px solid #EFCE8C;
    padding:0.5em;display:block;">efg</div>

    <div style="float:left; width:12em;border: 2px solid #EFCE8C;
    margin-right:1em; padding:0.5em;display:block;">abc</div>
    <div style="float:none; width:12em;border: 2px solid #EFCE8C;
    padding:0.5em;display:block;">efg</div>
    <br />

    here is a good discussion:
    http://www.webmasterworld.com/forum83/4961.htm
     
    Steve Richter, May 29, 2007
    #3
    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. Ken Kafieh
    Replies:
    7
    Views:
    2,521
    Roedy Green
    May 19, 2004
  2. William Krick
    Replies:
    4
    Views:
    77,988
    rt19983
    Dec 18, 2008
  3. Skip Montanaro

    sys._getframe() not behaving as expected

    Skip Montanaro, Dec 1, 2003, in forum: Python
    Replies:
    0
    Views:
    373
    Skip Montanaro
    Dec 1, 2003
  4. Replies:
    1
    Views:
    354
    David
    Apr 16, 2007
  5. Replies:
    2
    Views:
    447
Loading...

Share This Page