How can this be done

How can this be done

Post by Paul » Thu, 14 Feb 2008 02:14:37

Hi I am trying to design a web with min /max width ( I have found a hack
for IE6) If you reduce the size of the browser manually you see that the
page degrades to about 720 px min-width and enlarges to 960 max_width
The problem I am having is I want the banner image to slide behind the form
div on the left as the browser get narrower instead slipping beneath the the
form div

The form div floats left and the banner div floats right
any ideas

Here is the page

Paul M

How can this be done

Post by S2F0aHl » Thu, 14 Feb 2008 04:52:00

Floated elements are supposed to avoid one another, so you have to set one to
a fixed location. Set "#search" to be absolutely positioned.

(First, check code view and clean up the syntax errors.)

Then, modify #search to the following:

margin: 0px;
height: 251px;
width: 300px;
padding: 10px;
background-image: url('mainimages/formBG.gif');
background-repeat: no-repeat;
position: absolute;
top: 163px;
left: auto;

Position "absolute" lets the banner ignore it and float behind it, and
"left:auto" lets it move as the page is centered when the browser is expanded.

Works in IE6, IE7, Firefox, Opera, and Safari for PC. Since you've got
images rather than varying text to that point, the absolute positioning
doesn't get messy when browser text size is changed.



How can this be done

Post by Paul » Thu, 14 Feb 2008 17:49:56

Thanks Kathy works a treat
Paul M

How can this be done

Post by Dabble » Mon, 18 Feb 2008 06:00:18

Hello Paul,

You could make the banner a background-image:url(...) position:right; of
the same div the form is in? Note there are other problems with this layout,
when I look at it Portal 1 doesn't appear until I squeeze the life out of
the width ;)

I would recommend CSS and HTML usage questions be posted to Adobe's Dreamweaver
forum... the EW forum is relatively new and hasn't built up the following
that the DW forum has over the years it's been in existence. You will find
LOTS of helpful and very experienced designers there.