Resizing problem

Forum Moderators: not2easy

Message Too Old, No Replies

Resizing problem

dan79

11:50 pm on Apr 10, 2004 (gmt 0)

[sorry for the cross post, realised this was better served in this forum]

I'm new to using CSS and I'm running into a problem with resizing my window. The header looks fine with I start with a browser of 700px or bigger in width, but when I shrink the window, everything from the right gets mashed over the left side stuff. I tried setting the min width for my header but it's not doing what I had hoped.
I have two images for my main header and a background black color. One image is aligned left, the other right. This works great when I size the screen bigger than normal (black appears between the two images and it looks fine). But I run into the above problem when sizing it smaller. The right image just overtakes the left one. I would rather have the left image nolonger resize smaller past 700 pixels. Can someone give me a lead?
Thanks!

Dan

Rambo Tribble

12:46 am on Apr 11, 2004 (gmt 0)

It would probably help if you posted your code. I suspect you are using absolute positioning. Floats may provide a solution. To use min-width you should use it on a containing element for the images, like a div.

dan79

4:02 am on Apr 11, 2004 (gmt 0)

Sorry for not including the code earlier...(forewarning, I'm new to html and css)

here is the portion of the index.html:
<body>
<div id="main-title"></div>
<div id="end-title"></div>
</body>

and the css file:

#main-title {
margin-bottom: 0;
margin-left: 0;
margin-right: 140px;
padding-right: 170px;
font-size: 1.3em;
letter-spacing: 5px;
text-align: left;
background-image: url(../newtitle.gif);
background-repeat: no-repeat;
background-position: top left;
background-color: #000000;
height: 75px;
color: #838383;
padding-top: 0px;
min-width: 700px;
min-height: 75px;
width: 750px;
}

#end-title {
margin-bottom: 0;
margin-right: 0;
padding-right: 0px;
font-size: 1.3em;
letter-spacing: 5px;
text-align: left;
background-image: url(../titleend.gif);
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
height: 75px;
position: absolute;
top: 0px;
right: 0;
width: 170px;
color: #838383;
padding-top: 0px;
position: absolute;
padding-left: 0px;
}

Rambo Tribble

5:06 am on Apr 11, 2004 (gmt 0)

You can float your divs, one left, one right, instead of the absolute positioning of the right one. It is the absolute positioning that is allowing the overlap. With floats, if the divs get crunched, they will stack. Conversely, you can just contain both divs within a div that has a min-width.

By the way, your second div has position:absolute twice.

dan79

2:36 pm on Apr 11, 2004 (gmt 0)

How would I contain both within the same div?

I tried floating them, and it works... but when I shrink it down, the second floated image just drops below it. I don't want that.

TheDoctor

9:04 am on Apr 12, 2004 (gmt 0)

That's because all your widths are in pixels (px). This keeps the divs etc the same size regardless of the size of the window.

If you want objects in your page to be a fixed proportion of the browser window in size, use percentages (eg width:45%).