Re: overlapping boxes

Discussion in 'HTML' started by Jenn, May 11, 2010.

  1. Jenn

    Jenn Guest

    Lewis wrote:
    > I made a page as a demo showing a left and right menu, a heading, and
    > a min article window. The left and right menus are set to 15% are are
    > floated to the left and right.
    >
    > The middle div is set to be 70% wide.
    >
    > However, the floated left and right divs are intruding into the center
    > div because of the padding in the #article definition. I actually
    > want a border around the article without having that border intrude
    > into the menus. Is there a way to specify that the padding should be
    > INSIDE the border while still making the page completely fluid?
    >
    > I suppose I can just pad the right and left side of the menus, but if
    > their font sizes are different, that still won't line up correctly.
    >
    > <http://home.kreme.com/logo-demo.html>


    Change menu 2 to 10% and leave menu3 at 12% .. OR change both to 11% width

    #menu2
    {
    width: 10%;
    background-color: (30,30,90);
    float: right;
    border: red 1px solid;
    text-align: left;
    }

    #menu2items>a { display: block; }

    #menu3
    {
    width: 12%;
    background-color: (30,30,90);
    float: left;
    border: yellow 1px solid;
    text-align: right;
    }

    --
    Jenn (from Oklahoma)
    http://pqlr.org/bbs/
     
    Jenn, May 11, 2010
    #1
    1. Advertising

  2. Jenn

    Jenn Guest

    Jenn wrote:
    > Lewis wrote:
    >> I made a page as a demo showing a left and right menu, a heading, and
    >> a min article window. The left and right menus are set to 15% are are
    >> floated to the left and right.
    >>
    >> The middle div is set to be 70% wide.
    >>
    >> However, the floated left and right divs are intruding into the
    >> center div because of the padding in the #article definition. I
    >> actually want a border around the article without having that border
    >> intrude into the menus. Is there a way to specify that the padding
    >> should be INSIDE the border while still making the page completely
    >> fluid? I suppose I can just pad the right and left side of the menus, but
    >> if
    >> their font sizes are different, that still won't line up correctly.
    >>
    >> <http://home.kreme.com/logo-demo.html>

    >
    > Change menu 2 to 10% and leave menu3 at 12% .. OR change both to 11%
    > width
    > #menu2
    > {
    > width: 10%;
    > background-color: (30,30,90);
    > float: right;
    > border: red 1px solid;
    > text-align: left;
    > }
    >
    > #menu2items>a { display: block; }
    >
    > #menu3
    > {
    > width: 12%;
    > background-color: (30,30,90);
    > float: left;
    > border: yellow 1px solid;
    > text-align: right;
    > }


    Also.. if you do this.. add position: absolute it locks the left nav to the
    content ...
    #article
    {
    border: green solid 1px;
    width: 70%;
    margin: 0 auto 0 auto;
    padding: 0 2em 0 2em;
    border-collapse: collapse;
    position:absolute;
    }

    The right nav is the last thing to fix.
    --
    Jenn (from Oklahoma)
    http://pqlr.org/bbs/
     
    Jenn, May 11, 2010
    #2
    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. Tony
    Replies:
    4
    Views:
    2,147
    Andy De Petter
    Nov 27, 2003
  2. Harry Whitehouse
    Replies:
    3
    Views:
    440
    Harry Whitehouse
    Jul 22, 2003
  3. mark

    overlapping datagrids

    mark, Mar 3, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    364
    Chris Jackson
    Mar 5, 2004
  4. Stefan Mueller
    Replies:
    5
    Views:
    12,402
    jamesxa
    Jun 16, 2009
  5. freemont

    Re: overlapping boxes

    freemont, May 11, 2010, in forum: HTML
    Replies:
    55
    Views:
    1,661
Loading...

Share This Page