7 replies [Last post]
mlwang
Offline
newbie
Last seen: 16 years 27 weeks ago
Timezone: GMT+8
Joined: 2004-04-18
Posts: 4
Points: 0

(edited: deleted irrelevant codes in the post, to make it shorter)

Hi everyone,

Newbie to this forum and I have a question for my side bar on my webpage below

http://www.thinkspore.com/abf/shanghai/network/

Ths side bar is ok when the browser window is fully open.

When when I resize the window (using the icon on the top of IE explorer), the side bar drops down to the bottom.

How can I ensure that the side bar remains on the side, by resizing itself, according to the browser window size?

In addition, is there a way for my banner image resize according to the size of the brower window?

Codes for the css

	body {
		margin:20px 20px 20px 20px;
		background:#FFF;		
		}
	A 			{ color: #993300; text-decoration: none; font-weight:normal; } 
	A:link		{ color: #993300; text-decoration: none; } 
	A:visited	{ color: #993300; text-decoration: none; } 
	A:active	{ color: #FFCC66;  } 
	A:hover		{ color: #FFCC66;  }

	h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

	#banner {
		font-family:georgia, verdana, arial, sans-serif;
		color:#FFF;
		font-size:x-large;
		font-weight:bold;
		border-left:1px dotted #FFF;	
		border-right:1px dotted #FFF;  		
		border-top:1px dotted #FFF;  		
  		background:#993333;
  		padding:15px; }

	#banner a,
        #banner a:link,
        #banner a:visited,
        #banner a:active,
        #banner a:hover {
		font-family:georgia, verdana, arial, sans-serif;
		font-size: x-large;
		font-weight: bold;
		color: #FFF;
		text-decoration: none;
		}
		
	.description {
		font-family:verdana, arial, sans-serif;
		color:#FFF;
		font-size:x-small;
		font-weight:bold;
  		background:#993300;
  		text-transform:none;	
		}	
				
	#content {
		float:left;
		position:relative;
		width:70%;
		background:#FFF;
		margin-right:15px;
		margin-bottom:20px;
		border:1px dotted #333;	
		}

	#container {
		float:left;
		position:relative;
		width:80%;
		background:#FFF;
		margin-right:15px;
		margin-bottom:20px;
		border:1px dotted #333;		
		}

	#links {
                                float:right;
                                position:relative;
                                background:#FF9933;
		padding:15px;				
		border:1px dotted #333;			
		}
		
	.blog {
  		padding:15px;
		background:#FFF;  							
		}	

	
	.blogbody {
		font-family:verdana, arial, sans-serif;
		color:#666;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:16px;			
		}

	.blogbody a,
	.blogbody a:link,
	.blogbody a:visited,
	.blogbody a:active,
	.blogbody a:hover {
		font-weight: normal;
		text-decoration: underline;
	}
	
	
	.side {
		font-family:verdana, arial, sans-serif;
		color:#333;
                                font-size:x-small;
		font-weight:normal;
                                text-align:center;
  		background:#FF9933;
  		line-height:140%;
  		padding:2px;				
		}	
		
	.sidetitle {
		font-family:verdana, arial, sans-serif;
		color:#FFF;
		font-size:small;
		font-weight:normal;
  		line-height:140%;
  		padding:2px;
  		margin-top:10px;
		letter-spacing: .1em;
		border-bottom:1px dotted #FFF;
		text-align:center;		  					
  		background:#FF9933;		
		}		
	

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

How do I ensure that the Side Bar remains on the side?

Hi mlwang,
When floating it's a good ideat to set a width for the floated elemet.
In your case the #links div is floated right without a width.
Since you have used a percentage for content which is floated beside it, I would suggest using another percentage for links.

The only thing you need to watch out for then is padding borders and margins.
In Quirks mode IE adds the padding and borders to the width of the box so setting padding as a percentage may make it easier to get the floats right.

Hope that helps

mlwang
Offline
newbie
Last seen: 16 years 27 weeks ago
Timezone: GMT+8
Joined: 2004-04-18
Posts: 4
Points: 0

How do I ensure that the Side Bar remains on the side?

Dear Tony

Thanks for the reply, I have added the width in the links, it does not seem to work,the side bar still drop to the bottom. any one can help?

			
	#content {
		float:left;
		position:relative;
		width:70%;
		background:#FFF;
		margin-right:15px;
		margin-bottom:20px;
		border:1px dotted #333;	
		}

	#container {
		float:left;
		position:relative;
		width:80%;
		background:#FFF;
		margin-right:15px;
		margin-bottom:20px;
		border:1px dotted #333;		
		}

	#links {
                                float:right;
                                position:relative;
                                width=20%;
                                background:#FF9933;
		padding:15px;				
		border:1px dotted #333;

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

How do I ensure that the Side Bar remains on the side?

Hi mlwang,
You made a slight typo in the width call, it should be width:20%; not width=20%;

mlwang
Offline
newbie
Last seen: 16 years 27 weeks ago
Timezone: GMT+8
Joined: 2004-04-18
Posts: 4
Points: 0

How do I ensure that the Side Bar remains on the side?

oops that is a very stupid mistake :roll:

tony, i have corrected the mistake, but the side bar still roll to the bottom. Hmm stubborn side bar.

How to move it just to the side?

I tried making the position:absolute, but it will not align with the banner.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

How do I ensure that the Side Bar remains on the side?

Hi mlwang,
There is something with a fixed size causing one of the divs to stop srinking at a certain width.
I think its the image between posts

mlwang
Offline
newbie
Last seen: 16 years 27 weeks ago
Timezone: GMT+8
Joined: 2004-04-18
Posts: 4
Points: 0

How do I ensure that the Side Bar remains on the side?

Dear tony

Thanks once again, i repasted the image between posts to another location and everything seems ok now for the main index website.

However, if i click on the find out more link, the side bar will drop again when i resize the browser window? what cound be the main reason?

http://www.thinkspore.com/abf/shanghai/network/000083.html#more

Is there any way to make the banner image resize also?

How do i make my browser open displaying the top of the link above. currently when u click on the link, it brings u down to the end of the post.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

How do I ensure that the Side Bar remains on the side?

Hi mlwang,
On that page it looks to be the textarea that is causing the problem.
Try setting it's width in the css as a percentage also.

The image seemed to have a lot of extra blank space on either side. I would remove that in an image editor and center the image.

Hope that helps