...

View Full Version : Expanding Div Alignment



sir pannels
02-19-2008, 10:21 AM
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 :D

Actinia
02-19-2008, 10:49 AM
You need to position your divs using the right property rather than the left. For the firrst three divs use:
#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

sir pannels
02-20-2008, 11:20 AM
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 :D

effpeetee
02-20-2008, 12:34 PM
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

sir pannels
02-20-2008, 12:53 PM
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 :)

effpeetee
02-20-2008, 03:28 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum