walkman69
asked on
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.
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
ASKER
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.
Well.. you have your points ^^
Thank you.
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/
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/
ASKER
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 =).
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 =).
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>ASKER
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?.
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?.
> 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.
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.
ASKER
"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.
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.
ASKER
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?.