floating: Layout problems

[alimoexxx]

hi guys,
I am designing a website. The site has to have 3 columns, so i floated the left bar to the left. Didn't float the main, middle content and i floated the right bar to the right. Everything looks perfect eeh?

well, not really!. Its coll if the browser is maximized but if you resize(squeeze) the window the contents condense, till to the point the right bar drops to the left. (http://sokoni.110mb.com)

I don't want that!! Please help me.

Thanking you in advance!

[robin9000]

I think your tiring to do something like I did on my site:
www.robinsden.110mb.com

here is the code I used in my css doc
#A1000{
background-image:url(../banner/3.jpg);
background-repeat:repeat-x;
height:120px;
margin:0px;
padding:0px;
}

#A1001{
background-image:url(../banner/1.jpg);
background-repeat:no-repeat;
height:120px;
width:310px;
float:left;
margin:0px;}

#A1002{
background-image:url(../banner/2.jpg);
background-repeat:no-repeat;
height:120px;
width:300px;
float:right;
margin:0px;
padding:0px;
}


and in the html doc's I just put the following in:

<div class="wrapper">
<div id="A1000">
<div id="A1001">
</div>
<div id="A1002">
</div>
</div>

[Snookerman]

Add this to your CSS code:

#container {
background:transparent none repeat scroll 0 0;
width:auto;
min-width: 600px;
}

Good luck!

[alimoexxx]

thanks,
But thats what I did in CSS doc too... I just dont want the right bar to drop left.

and can you please tell me how to get a banner like that which streches wide with no horizontal scrols.

[robin9000]

thanks,
But thats what I did in CSS doc too... I just dont want the right bar to drop left.

and can you please tell me how to get a banner like that which streches wide with no horizontal scrols.

If your talking about your search button how it drops down to the next line when the page is minimized, the only way to fix that is to make the search keyword bar smaller so it dose not jump the search button down.

[alimoexxx]

i need the search text bar to be that big!..

hey guys i tried but it only works with firefox and opera but not with IE6!
please help!...

[robin9000]

I am not sure what to say at this point on how to resolve the problem but really I don't think you should really be concerned with people minimizing their screens and having the box jump down one line. I don't ever minimize my screens and I really don't think there are many who do. I mean most people want to have a larger page bigger screen. People keep on wanting to view things on bigger displays. They don't tend to do the opposite. Just my thoughts. But if you still want to try and resolve this problem I think you may find it is going to be difficult to do as it is more of a browser thing as you have noticed rather then a page issue.

[Snookerman]

Add this to your CSS code:

#container {
margin: 0;
padding: 0;
min-width: 600px;
width: auto !important;
width: 600px;
}
Make sure you put them in that exact order.

Good luck!

[alimoexxx]

I am not sure what to say at this point on how to resolve the problem but really I don't think you should really be concerned with people minimizing their screens and having the box jump down one line. I don't ever minimize my screens and I really don't think there are many who do. I mean most people want to have a larger page bigger screen. People keep on wanting to view things on bigger displays. They don't tend to do the opposite. Just my thoughts. But if you still want to try and resolve this problem I think you may find it is going to be difficult to do as it is more of a browser thing as you have noticed rather then a page issue.

Thanks for the advice. I think I should live with that!