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

[joshbeall]

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?

 

[Philip]

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

 

[BootNic]

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*

 

[joshbeall]

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...?

 

[Philip]

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.

 

[joshbeall]

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]

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?[/QUOTE]

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