Simple question regarding the floating of <divs>...

Discussion in 'HTML' started by joshbeall@gmail.com, Jun 22, 2006.

  1. Guest

    Hi All,

    Take a look at this page:

    http://www.joshbeall.com/personal/BottomBorderIssue.htm

    See how the bottom border on the <div class="ContentHeader"> is running
    through the right-floated LoginBox div? That's not what I want. I'd
    like a line to run all the way across the page, but not to run through
    the LoginBox (or any other boxes that are there. I had expected it to
    behave like text, and to stop when it reaches the edge of the LoginBox.

    In other words, I'd *like* it to look like this:

    http://www.joshbeall.com/personal/BottomBorderDesired.png

    My thinking was I would control how close the horizontal line (bottom
    border on the ContentHeader div) comes to the LoginBox by setting the
    margin on the LoginBox.

    How would others recommend I accomplish this sort of thing?
     
    , Jun 22, 2006
    #1
    1. Advertising

  2. Philip Guest

    In article <>,
    wrote:

    > Hi All,
    >
    > Take a look at this page:
    >
    > http://www.joshbeall.com/personal/BottomBorderIssue.htm
    >
    > See how the bottom border on the <div class="ContentHeader"> is running
    > through the right-floated LoginBox div? That's not what I want. I'd
    > like a line to run all the way across the page, but not to run through
    > the LoginBox (or any other boxes that are there. I had expected it to
    > behave like text, and to stop when it reaches the edge of the LoginBox.


    THe login box is floated, and that takes it out of the normal
    arrangement of elements which is why it doesn't behave like you expect.
    I'd fix it by changing the div.ContentHeader margin definition to this:
    margin-top: 1em;
    margin-right: 225px;

    Even better, don't use pixel widths (they're not friendly to changes in
    text size) so you get something like this:
    div.ContentHeader { margin-top: 1em; margin-right: 12em; }
    div.LoginBox { width: 15em; }

    HTH

    --
    Philip
    http://NikitaTheSpider.com/
    Bulk HTML validation, link checking and more
     
    Philip, Jun 22, 2006
    #2
    1. Advertising

  3. BootNic Guest

    > "" <> wrote:
    > news:....
    >
    > Hi All,
    >
    > Take a look at this page:
    >
    > http://www.joshbeall.com/personal/BottomBorderIssue.htm
    >
    > See how the bottom border on the <div class="ContentHeader"> is
    > running through the right-floated LoginBox div? That's not what I
    > want. I'd like a line to run all the way across the page, but not
    > to run through the LoginBox (or any other boxes that are there. I
    > had expected it to behave like text, and to stop when it reaches
    > the edge of the LoginBox.
    >
    > In other words, I'd *like* it to look like this:
    >
    > http://www.joshbeall.com/personal/BottomBorderDesired.png
    >
    > My thinking was I would control how close the horizontal line
    > (bottom border on the ContentHeader div) comes to the LoginBox by
    > setting the margin on the LoginBox.
    >
    > How would others recommend I accomplish this sort of thing?


    Assign a color and background color to div.LoginBox.

    --
    BootNic Thursday, June 22, 2006 7:53 PM

    Optimism and humor are the grease and glue of life. Without both of
    them we would never have survived our captivity.
    *Philip Butler, Vietnam POW*
     
    BootNic, Jun 23, 2006
    #3
  4. Guest

    Thanks for the suggestions. Both work, but the drawbacks I see are:

    -If I set the margin on the ContentHeader class, then any headers that
    appear below the login box in the text will not have a bottom border
    that goes all the way to the right. Not quite what I want.
    -If I set the background color, then the border may have the appearance
    of going underneath the login box, and will "come out the other side."
    Also not what I want.

    But if those are simply the "way it works" I will work within those
    contraints. Just thought I'd check to see if there were other
    options...?
     
    , Jun 23, 2006
    #4
  5. Philip Guest

    In article <>,
    wrote:

    > Thanks for the suggestions. Both work, but the drawbacks I see are:
    >
    > -If I set the margin on the ContentHeader class, then any headers that
    > appear below the login box in the text will not have a bottom border
    > that goes all the way to the right. Not quite what I want.
    > -If I set the background color, then the border may have the appearance
    > of going underneath the login box, and will "come out the other side."
    > Also not what I want.
    >
    > But if those are simply the "way it works" I will work within those
    > contraints. Just thought I'd check to see if there were other
    > options...?


    OK, then wrap the login box in another DIV, so you have this:

    +------------------------------+
    | |
    | +-------------------+ |
    | | | |
    | | login box | |
    | | | |
    | | | |
    | +-------------------+ |
    | |
    +------------------------------+


    You can play with the margins on the outer box to achieve an effect you
    like.

    --
    Philip
    http://NikitaTheSpider.com/
    Bulk HTML validation, link checking and more
     
    Philip, Jun 23, 2006
    #5
  6. Guest

    Philip wrote:
    > In article <>,
    > wrote:
    >
    > > Thanks for the suggestions. Both work, but the drawbacks I see are:
    > >
    > > -If I set the margin on the ContentHeader class, then any headers that
    > > appear below the login box in the text will not have a bottom border
    > > that goes all the way to the right. Not quite what I want.
    > > -If I set the background color, then the border may have the appearance
    > > of going underneath the login box, and will "come out the other side."
    > > Also not what I want.
    > >
    > > But if those are simply the "way it works" I will work within those
    > > contraints. Just thought I'd check to see if there were other
    > > options...?

    >
    > OK, then wrap the login box in another DIV, so you have this:
    >
    > +------------------------------+
    > | |
    > | +-------------------+ |
    > | | | |
    > | | login box | |
    > | | | |
    > | | | |
    > | +-------------------+ |
    > | |
    > +------------------------------+
    >
    >
    > You can play with the margins on the outer box to achieve an effect you
    > like.
    >
    > --


    I would want padding, not margin, if I understand correctly... is that
    right?

    That way, the outer box would be consuming canvas space (and covering
    up the bottom-border horizontal line), and then I would be using the
    padding on the outerbox to position the login box on the inside.

    Is that right?
    > Philip
    > http://NikitaTheSpider.com/
    > Bulk HTML validation, link checking and more
     
    , Jun 23, 2006
    #6
  7. Philip Guest

    In article <>,
    wrote:
    > > You can play with the margins on the outer box to achieve an effect you
    > > like.
    > >

    > I would want padding, not margin, if I understand correctly... is that
    > right?
    >
    > That way, the outer box would be consuming canvas space (and covering
    > up the bottom-border horizontal line), and then I would be using the
    > padding on the outerbox to position the login box on the inside.
    >
    > Is that right?


    Yes, sorry about that, I should have said padding, not margins.

    --
    Philip
    http://NikitaTheSpider.com/
    Bulk HTML validation, link checking and more
     
    Philip, Jun 23, 2006
    #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. =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=

    DIVs floating to left display incorrect if IE4

    =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=, Oct 23, 2003, in forum: HTML
    Replies:
    2
    Views:
    538
    Toby A Inkster
    Oct 24, 2003
  2. rich
    Replies:
    0
    Views:
    741
  3. Snef
    Replies:
    18
    Views:
    1,018
  4. Matt Walker

    floating divs wrapping differently

    Matt Walker, Apr 2, 2007, in forum: HTML
    Replies:
    1
    Views:
    531
    Ben C
    Apr 3, 2007
  5. maya
    Replies:
    4
    Views:
    253
Loading...

Share This Page