Making Site With % And Min Width? Does It Work? How?

[Dareus]

Hi, Ok I have a few people telling me I should make my site in %'s. Here is where I am very lost.I tried and made a few divs in %'s and my header. When I shirnk the browser it moves around as they are floats.So then I am wanting to add my images to the site but they wont work properly if the site doesnt atleast go to a fixed px site if it is going smaller, and if it goes larger to stop at one point etc.I hope that made sense.. now to my real question :)Ok, so If I am to make a site using %'s how do I base it? Do i say pretend my site is 1000px so if i have a image 270px I type it as 27%?Do I have to put a % on all my divs, my images? everything?My site I am working on is going to have the following...A header graphic, with chains connected to the divs, left, right and center. Then the water background in the bottom is going to have 2 divs in it, with reflections,so with this in hand, I dont want things to move OR.. If they move I need them to remain in line.I am told a Fixed PX site is not good especially for smaller screens,Then I am told that a % site looks good on any screen size pretty much.So... How does that work? How do you know what % to make things as? Can I put a Body Min width? Max width? ThanksI'm sorry for asking so many, but i looked at it in the tutorials here but I really dont grasp it all too well.My site for it iswww.conceptmontreal.com (click the path picture to see what I am workin on)YES, I know there are 2 different themes, but I am keeping myself open. I like my splash page but my second page I may just turn it to the page normally and have that as my main site.As my site is going to be png or jpg reliant a bit, I need things to stay put.. How would you do it?Have a good day.

[Ingolme]

This page gives me a horizontal scrollbar, you shouldn't give it 1024px width.It's not necessary to use percentages, block elements automatically extend their width to take up as much space as there is available, but it will leave the margins and padding within the limit of their container.The margins and padding of the html and body elements probably will interfere with the layout.Add this to your document:

<style type="text/css">html,body {  /* Assigning styles to both html and body elements */  margin: 0;  padding: 0;  background-color: #000;  background-repeat: no-repeat;  text-align: center;}body {/**** Judging by the rest of your code,*** you wanted a 5% margin on*** both sides of the page*/  margin-left: 5%;  margin-right: 5%;}#header {  background-image: url(pics/background-top.png);  text-align: center;  height: 473px;/**** Removed width: 1024px;*** The div already expands to take up the available space*//**** Removed margin-left: 5%;*** This has been placed on the body element*/}#rightlinks {  background-color: #000;  height: 500px;  width: 300px;/**** Removed margin-left: 20px;*** We'll add that to the center column instead*//**** Removed  position: relative;*** This isn't doing anything, so there's no reason to keep it*/  border: 5px solid #333;/**** Since this is the RIGHT column, it's only logical to float it to the RIGHT*/  float: right;}#center {/**** Removed float: left;*** Since this is the center column, we need not float it neither left nor right*/  height: 500px;/**** Removed width: 400px;*** This is the center column and is flexible*//**** Removed position: relative;*** This isn't doing anything here.*/  border: 5px solid #333;  background-color: #000;/**** The following margins will be the 20px*** on either side plus the width of the left*** and right columns.*** This div will automatically expand to*** take all the available width that*** remains after applying the margins.*/  margin-left: 305px; /* 285 + 20 */  margin-right: 320px; /* 300 + 20 */}/**** Removed:  .headerup {    position: relative;  }*** This isn't doing anything*/#leftlinks {  text-decoration: none;  background-color: #000;  height: 500px;  width: 285px;  border: 5px solid #333;/**** Removed position: static;*** Elements are already static by default*/  float: left;/**** Removed margin-left: 4%;*** This has been placed on the body element*/}#footer {/**** Removed position: static;*** Elements are already static by default*/  background-image: url(pics/waterresize.jpg);  height: 260px;/**** Removed width: 1024px;*** This element will automatically expand*** to take up all the avaiable width of*** its container*/  background-repeat: no-repeat;  clear: both;/**** Removed margin-left: 5%;*** This has been placed on the body element*/}</style>

By the way, that's one large background image you have, users may have to wait a while before it loads for them.

[thescientist]

hey Inglome, i just noticed you recommended an XHTML Strict DTD. For some reason I thought I remember you recommending HTML Strict 4.01 recently. Did I just misread you?

[Ingolme]

hey Inglome, i just noticed you recommended an XHTML Strict DTD. For some reason I thought I remember you recommending HTML Strict 4.01 recently. Did I just misread you?

They're both the same. HTML and XHTML are two different languages. But for each one of them, the Strict DTD is the one that should be used. I suggested the XHTML one because the code on your page seems to be XHTML.

[Dareus]

They're both the same. HTML and XHTML are two different languages. But for each one of them, the Strict DTD is the one that should be used. I suggested the XHTML one because the code on your page seems to be XHTML.

Thanks, I will check it out. I read your comments and I understand a bit more now. I know my image is a little big but I'm not sure how yet to rectify that, I may make it less wide, and make the site less wide to compensate.I didnt realize the block element would take the whole width, I really only knew block for a link element, in display:block.I'll give this a try tonight and let you know how it went.Thanks.