Fit Table Resolution For Free

demonstrate how to make auto adjusting stretchy fit website layouts and images simple easy to build layouts that scale to fit the full width of the user browser window regardless of the device or screen size a user has so not only can you stretch your images you can stretch all of your containers as well here is the page layout example and code that you are going to receive and this is what it renders so we have a layout that will auto stretch to fit the full width the browser window and I made the images also stretchy and there is header graphics up top that Auto repeat and what we have in the middle are four columns so this is like a four column layout you can make two column layouts one column layout three column layouts eight column layouts as long as you get your percentages correct I have mine set to 25% each column so that's how I achieve the stretchiness if the browser's window is only this big and the columns keep their 25% so it doesn't matter what size the users window is all of that's going to fit in there perfectly and I also made it to where when you're stretching it down or if the users window gets too small it has a minimum width the whole center of the page has a minimum width of about 700 so that's why you don't see it scaling down anymore but if I was to go in here and let's see where's that minimum width minimum width 7 I change that to 300 now if i refresh the page I can now scale it down much small you see and that's a minimum width of 300 pixels for the container that holds all four of these columns so you set your minimum width and it will stop scaling down once the user's window reaches a minimum width so you can just put that on whatever you want let's put 800 let's take a look and you can see as I scale now it will stop when it reaches 800 pixels there for the container that holds all four of those columns now as they quickly explain this code example I slap together I'm going to assume you have basic knowledge of HTML and CSS okay so let's open this back up again and we have this top div has a background of the top slivered that's why how we have that gradient bar going across the top and it's repeat-x so it repeats horizontally on the horizontal plane the height is 73 it's really a 93 high image but I have padding of 22 top so I had from my height so instead of the height being 93 which that graphic actually is since I have 20 pixel padding inside of it I can't have that say 93 or it'll be too big so you have a padding of top 20 and padding of left 20 and that gives you that header that you see there with those graphics then you can see here div ID of middle has a min width of 800 pixels and I already explain that to you then div middle we go into its child divs and we set them to be float:left with 25% and that's how we get all of these four columns to lay on the page horizontally next to each other if you don't set them to float they're going to have a block element display and they'll all stack vertically down the...