Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simple question regarding the floating of <divs>...

Reply
Thread Tools

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

 
 
joshbeall@gmail.com
Guest
Posts: n/a
 
      06-22-2006
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/Bo...derDesired.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?

 
Reply With Quote
 
 
 
 
Philip
Guest
Posts: n/a
 
      06-22-2006
In article <(E-Mail Removed) .com>,
http://www.velocityreviews.com/forums/(E-Mail Removed) 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
 
Reply With Quote
 
 
 
 
BootNic
Guest
Posts: n/a
 
      06-22-2006
> "(E-Mail Removed)" <(E-Mail Removed)> wrote:
> news:(E-Mail Removed) oups.com....
>
> 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/Bo...derDesired.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*

 
Reply With Quote
 
joshbeall@gmail.com
Guest
Posts: n/a
 
      06-23-2006
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...?

 
Reply With Quote
 
Philip
Guest
Posts: n/a
 
      06-23-2006
In article <(E-Mail Removed) .com>,
(E-Mail Removed) 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
 
Reply With Quote
 
joshbeall@gmail.com
Guest
Posts: n/a
 
      06-23-2006

Philip wrote:
> In article <(E-Mail Removed) .com>,
> (E-Mail Removed) 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


 
Reply With Quote
 
Philip
Guest
Posts: n/a
 
      06-23-2006
In article <(E-Mail Removed). com>,
(E-Mail Removed) 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
a simple question regarding virtual directories Developer.Man4@gmail.com ASP .Net 1 02-06-2007 07:52 PM
floating point problem... floating indeed :( teeshift Ruby 2 12-01-2006 01:16 AM
Simple Question regarding relative path references damiensawyer@yahoo.com.au ASP .Net 1 06-02-2005 08:21 AM
Problem regarding sum of digits of floating point number in C Shreyas Kulkarni C Programming 1 12-27-2004 03:40 AM
DVD Verdict reviews: A STORY OF FLOATING WEEDS / FLOATING WEEDS: CRITERION COLLECTION and more! DVD Verdict DVD Video 0 04-20-2004 09:04 AM



Advertisments