Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Expanding Div Alignment

    Morning all,

    Got an issue with a CSS Div expanding layout I can't come up with a good solution for, maybe someone could lend me their expierence and point me in the right direction.

    I have a header layout, few divs with images in and one div with an image background.. the div with the image background is the main div and is the only div that has a % width, the rest are fixed pixel widths. So when the page expands, bigger browsers ,dragging window size etc... this main bar expands and shrinks. That works, the only problem I'm having is that on the end of the expanding bar is another div that has an image in, its the end image that completes the bar.... the div css is hheader_menubar and hheader_endbar

    The page/code: http://www.madcapsule.com/dev/header.html

    I'm stumped to work out how to get that end bar image/div to move with the expanding/shrinking bar? At the moment if the page expands or shrinks the end image stays where it is, so it either ends up apart from the shrinking bar or being put in the middle of the expanding bar. If you have a second take a look at the page and expand/shrink it and you proberly see what I mean.

    If anyone has any information that would be much appreciated.

    Many thanks,
    Sir P

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    You need to position your divs using the right property rather than the left. For the firrst three divs use:
    Code:
    #hheader-11_ {
    	position:absolute;
    	right: 297px;
    /*	left:620px; */
    	top:22px;
    	width:9px;
    	height:24px;
    }
    
    #hheader-menubar_ {
    	position:absolute;
    	right: 10px;
    /*	left:629px; */
    	top:22px;
    	width:287px;
    	margin-top:1px;
    	height:24px;
    	background-color:#F0F8E1;
    }
    
    #hheader-13_ {
    	position:absolute;
    	right: 0px;
    /*	left:916px; */
    	top:22px;
    	width:10px;
    	height:24px;
    }
    with corresponding adjustments for the others.

    John

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Hi John,

    Thanks for your time with that. I understand using the right there as the right side of the browser is the one that expands, perfect. Thanks for that. Though I'm not convinced it has tackled the program exactly, please allow me to elaberate..

    The page.. http://www.madcapsule.com/dev/hheader.html

    has Table-01_ as the master div, the position is relative, and underneath are a couple of divs.. one is hheader-17_ for example, that has position:absolute and width:100%... from my understanding that hheader-17_ is fixed to the master div because its set to relative, and should be 100%width of the Table-01 div, but its not... hheader-17 goes right across the page and then some! :O it breaks the screen infact. If you see that link (http://www.madcapsule.com/dev/hheader.html) the header green link box stops in the right place but underneath all the divs go right to the end, and then about 50pixels extra.. and there is no shrinking/expanding at all in any form...

    If anyone has any further assistance it would be much appreciated.
    Warm Regards,
    Sir P

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Surely, if you set a fixed width for a div, it will not vary. Try setting a minimun width. min-width or maybe even do not set a width.:

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Thanks effpeetee...

    I tried having a width of nothing and it didnt display at all the min-width didnt make a difference to the problem.

    On your comment about fixed width... the width isnt fixed, its set to 100%.. so it should vary, shoudlnt it? Or did I misunderstand?

    Cheers for your time

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    On your comment about fixed width... the width isnt fixed, its set to 100%.. so it should vary, shoudlnt it? Or did I misunderstand?
    No! 100% is a fixed size. It is the screen width. Also, setting a width of zero is not the same as not setting a width. Width:0; is setting the width at ZERO.

    Frank
    Last edited by effpeetee; 02-20-2008 at 03:31 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •