How can i make my page fit every browsersize without percentual width AND adding min-width?

Hello again. I'm back with my page since I made the height work.. now i've got a new problem;
The width.

ok, let's cut to the chase. I got the DIVs as showed below, and I want the adds (DIV2)
to be constant in width, since it won't be very pretty when having a screen resolution that makes
DIV2 (if it were in percentual) 3 times wider than the advertise image. Since I can't force potential advertising customers to make an advertising image for every screen resolution there is.. ok, that would be a solve, but I really can't, I could request a high resolution image and then size it to fit the page size,
but this could cause problems with for example flash-adds and such.

I would also like the adds to be able to reach outside the browser-window if they are to large.
So that you would need to scroll right to see them. Perhaps it sounds ridiculous, but it's one way to restrict the advertising-customers even less, and many pages have that solution. I've found a way to do this by setting DIV Container to relative, DIV1 to float left, and DIV2 to absolute. It's probably just one of many possible solutions, and you probably have a better one..

So one could say that I would like the DIV1 to have a min-width of maximum width for the browser window minus 225px (wich I believe is somewhat a standard size for advertising).
So if I have a screen resolution of 1024 I would like the min width of the main_wrapper to be
1024 (and perhaps compensate for the scroll bar with -17px).

I hope I have described the problem quite well.. Please ask any follow up questions to get a better idea of the problem.

<DIV id="main_wrapper">
// DIV logo - LOGO AND SUCH                                 //
//                                                          // 
// DIV Container divided in two DIVs.    //                 //
// DIV1 - loginform                      // DIV2 - adds     //
// ------------------------------------- //                 //
// | Tablepart1 - contains text and    | //                 //
// | the actual login form             | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |-----------------------------------| //                 //
// | Tablepart2 contains               | //                 //
// | ways to create new member,        | //                 //
// | demo of service etc.              | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |                                   | //                 //
// |-----------------------------------| //                 //
//                                       //                 // 
//                                       //                 // 
// DIV footer divided in two DIVs        //                 //
// DIV1 - links                          // DIV2 - extras   // 

Open in new window

Who is Participating?
ASPSQLServerCOMConnect With a Mentor Commented:
use javascript to get the screen resolution and accordingly change the div height and width
walkman69Author Commented:
I guess there aint any other way to do it? like with CSS?

I have nothing against using javascript tough, i'm using javascript to get the height of the window.
But it takes so long to do the calculating and right now my page has a width from the beginning, making it come up on the screen for 1 second and then be transformed into another size, very ugly. But i guess this might be avoidable by not setting any width from the beginning and perhaps hide the page until it is loaded but it somehow feels very amateurlike. What do you think?.
i dont think so it will take that much time to load and adjust, it generally use to be very fast
if it is really slow then in that case you can use display some image lilke loading with your page loading and doing calculation in back and once it is done then display the actual page, use div for it
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

walkman69Author Commented:
Yea, that's what I have for the moment atleast when in internet explorer since it displays everything while it is loaded unlike firefox wich displays everything when it has been loaded..

Well.. you have your points ^^
Thank you.
David S.Commented:
You don't need JavaScript for this. What you want is rather simple if you give it some thought. You want a min-width of your main column that is 1024px plus a second column of about 255px therefore, you put a min-width on the container of 1280px.

1024 seems to be rather wide for a min-width though. I wouldn't go wider than 780px for that.

IE6 doesn't support min-width, so I use and recommend this workaround for it:
walkman69Author Commented:
No I think you missunderstood Kravimir, I need the DIV1 and DIV2 together to be 1024-17 wide.
or rather i need them to adjust to any given screen width. The min-width is just there to prevent resizing the page and making eventual floated objects to be displayed under each other rather than next to each other. I know of a workaround for explorers failure to accomplish min-width. But i learnt that if i don't use float on DIV2 it wont wrap anywhere, so problem solved =).
David S.Commented:
Oh. Ok. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">/* <![CDATA[ */
html,body,form,a img,img {
  margin: 0;
  padding: 0;
  border: 0 none;
#outermost>.minwidth {
#contentWrapper {
  float: left;
  width: 100%;
  margin-right: -260px;
  background: red;
  position: relative;
#content {
  margin-right: 260px;
  background-color: #39e;
  position: relative;
  padding: 1px 0; /* to prevent collapsing margins */
  min-height: 10px; /* for IE7 */
#sidebar {
  width: 255px;
  float: right;
  display: inline;
  position: relative;
  background-color: #3e6;
  padding: 1px 0; /* to prevent collapsing margins */
   WARNING: This technique doesn't work right in IE4, so I recommend using an
   @import filter or conditional comment to hide it from IE4.
   (At least one of the @import filters and the conditional comment would also 
   hide it from IE5/Mac though.)
/* min-width for IE5-6/Win and IE5/Mac */
* html body {padding-left:1000px;width:auto;}
* html #outermost .minwidth {margin-left:-1000px;position:relative;}
/* \*/
* html #outermost,* html .minwidth,* html #content {height:1px;}
/* */
/* ]]> */</style>
<div id="outermost"><div class="minwidth">
<div id="contentWrapper">
<div id="content">
<h1>Content, 1</h1>
<p>Negative margins will blow your mind.</p>
</div><!-- /#content -->
</div><!-- /#wrapper -->
<div id="sidebar">
<h1>Sidebar, 2</h1>
</div><!-- /#sidebar -->
</div></div><!-- /#outermost -->

Open in new window

walkman69Author Commented:
That's also an interesting solution.. Now the min-width doesn't work for larger browserwindows than 1000px, but i think it still is quite nice.. Perhaps i'll try to make a prototype based on this code as well.
It depends on how much time i have right now. But it was really nice.. I'm however quite new here.. is there by chance any way to award you with points as well afterward awarding someone else?.
David S.Commented:
> Now the min-width doesn't work for larger browserwindows than 1000px

Eh? That's the way min-width works. You want it to work a different way?

> is there by chance any way to award you with points as well afterward awarding someone else?

I don't think there is. Don't worry about it though since I replied after you had already accepted an answer.

By the way, screen resolution is not very relevant since many people do not keep their browser windows maximized and also many people will have sidebars open.
walkman69Author Commented:
"Eh? That's the way min-width works. You want it to work a different way?"

hehe.. no, I just want it to adapt to the screen size so that the DIV2 (sidebar) don't follow the window when resizing it, it's quite annoying if you ask me ^^. My page design looks best in full size, but I'll have
those words under consideration. I might change the appearance later on in the project. Right now I need a prototype that works somewhat good. And I think I have for now.

"I don't think there is. Don't worry about it though since I replied after you had already accepted an answer."

Too bad.. I think it was a very neet solve tough. It deserved some points.
But I thank you for showing me this nice CSS structure. It'll come in handy. =)

Now I'll wrap this up and hit the sack.. see you.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.