Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2008-11-04
10
Medium Priority
?
392 Views
Last Modified: 2009-12-16
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   // 
//////////////////////////////////////////////////////////////
 
</DIV>

Open in new window

0
Comment
Question by:walkman69
  • 5
  • 3
  • 2
10 Comments
 
LVL 7

Accepted Solution

by:
ASPSQLServerCOM earned 2000 total points
ID: 22877494
use javascript to get the screen resolution and accordingly change the div height and width

http://www.pageresource.com/jscript/jscreen.htm
0
 
LVL 2

Author Comment

by:walkman69
ID: 22880553
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?.
0
 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22880584
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 2

Author Comment

by:walkman69
ID: 22880678
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.
0
 
LVL 43

Expert Comment

by:David S.
ID: 22881254
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: http://www.webreference.com/programming/min-width/
0
 
LVL 2

Author Comment

by:walkman69
ID: 22881351
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 =).
0
 
LVL 43

Expert Comment

by:David S.
ID: 22881641
Oh. Ok. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">/* <![CDATA[ */
html,body,form,a img,img {
  margin: 0;
  padding: 0;
  border: 0 none;
}
 
 
#outermost>.minwidth {
  min-width:1000px;
}
 
#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>
</head>
<body>
 
<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 -->
 
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:walkman69
ID: 22881756
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?.
0
 
LVL 43

Expert Comment

by:David S.
ID: 22881804
> 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.
0
 
LVL 2

Author Comment

by:walkman69
ID: 22881920
"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.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question