adjustable width

[catfish]

I have made my first attempt at an expanding layout for this new website. I am happy with it but upon furthur investigation I see when the browser is smaller the layout is no longer centered.

 

I have a horizontal navigation that I don't want stacking as well as a right hand image in the banner that I don't want overlapping with the left so I have placed a min-width of 920px on the container. When I remove this the container will stay centered but the nav and the image overlap.

 

this is the css for the #container;

 

#container{

margin:19px 15%;

background-color: #efefef;

border:1px solid #4b4a4a;

border-bottom:2px solid #4b4a4a;

min-width:920px;

}

 

Any suggestions would be great. My link is here;

http://www.catfishwebcreations.com/DrSmith/red.html

 

Thanks!

[Andrea]

go with this:

#container{
   margin:19px auto;

[catfish]

Thankyou Thelma... but that is not the look I am after either. That fills the screen and I would like to see some of the background around the container.

[Andrea]

#container{
   margin:19px auto;
   background-color: #efefef;
   border:1px solid #4b4a4a;
   border-bottom:2px solid #4b4a4a;
       width: 70%;
   min-width:920px;
}

seems to work.

[catfish]

Yes it is better. Now what I notice though is that it throws off my matching columns. The smaller the browser, the more the right column moves down.

 

(actually, I guess I always did??) Can you see why?)

Edited February 22, 2009 by catfish

[catfish]

Ok, I think it is working fine now in FF, IE, but not in Safari or Opera??

[Andrea]

Ok, I think it is working fine now in FF, IE, but not in Safari or Opera??

I didn't see that happening in FX earlier - and just now tried Opera (9.6) and Safari (3.2), and on both I just get the horizontal scrollbar when the window gets too narrow, but the layout doesn't break...

[catfish]

I'm sorry, I think I have played with it so much I go confused now. Will you please check again in the different browsers. If you say it looks ok, I will stop playing. Thanks again

[PicnicTutorials]

Hi,

 

I like the site - it looks good! Why do you have different styles for the container on the home page and the others? The home page looks good - that's how you should do the others in my opinion. If you continue with the adjustable width, then you should give it a max width as well. Did you have a more specific question?

[Andrea]

I checked it again - and the columns stay in place.

 

I agree with Eric about setting a max width - with the ever-higher resolutions possible these days, it can get pretty difficult to follow a line of text that stretches 1700px or more.

[catfish]

Oh my, I forgot that the links are active. I was trying 3 different styles/color schemes for this client, this one being the last. It is in the early stages of filling content, so yes all the pages will be the same in the end. He likes this one as well. Thankyou for that.

 

I wondered about a max-width as well but was unsure what it should be. What do you think for max-width?

 

When I hit the restore down button in most if not all the browsers the "back to top" link goes into the footer still. This is my specific question. Are you getting this too?

Edited February 22, 2009 by catfish