Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: overlapping boxes

Reply
Thread Tools

Re: overlapping boxes

 
 
Jenn
Guest
Posts: n/a
 
      05-11-2010
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/


 
Reply With Quote
 
 
 
 
Jenn
Guest
Posts: n/a
 
      05-11-2010
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/


 
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
Re: overlapping boxes freemont HTML 55 05-13-2010 02:07 PM
Space between input boxes and selection boxes is not the same in Internet Explorer Stefan Mueller HTML 5 06-16-2009 02:06 PM
PIX: IPSec between overlapping subnets and "dns" keyword Oleg Tipisov Cisco 0 08-10-2004 08:29 AM
regexp to list all sentences and sub sentences, with overlapping? Tony Perl 4 11-27-2003 01:38 PM
Pix 506e, VPN, and overlapping pools... a love story Nate Smith Cisco 2 10-21-2003 03:38 PM



Advertisments