XHTML and CSS - Max Width & Height
Max Width & Height
In this tutorial we're going to be looking at width and height in css. The first thing we want to do is add in two divs with the classes divOne and divTwo.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
Next let's give our div's some color so we can tell them apart, I'm going to make div one green and div two yellow.
<html> <head> <title> This is the title. </title> <style type="text/css"> .divOne { background-color: green; } .divTwo { background-color: yellow; } </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
Next I'm going to change the width and height of div one.
<html> <head> <title> This is the title. </title> <style type="text/css"> .divOne { background-color: green; width: 100px; height: 50px; } .divTwo { background-color: yellow; } </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
This is pretty self explanatory so I wont be going into to much detail but you'll see that div one is now 100 pixels wide and 50 pixels high. Next we will look at max width and max height, set div two's max-width to 60 pixels and it's max height to 200 pixels.
<html> <head> <title> This is the title. </title> <style type="text/css"> .divOne { background-color: green; width: 100px; height: 50px; } .divTwo { background-color: yellow; max-width: 60px; max-height: 200px; } </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
When you view this you'll see that we can't see div two even though we have given it a max width and a max height, this is because max-width and max-height are dynamic and will adjust to the size of the content that's in the element but also won't go over the set max, let's add some random text to our div two element to see this happen.
<html> <head> <title> This is the title. </title> <style type="text/css"> .divOne { background-color: green; width: 100px; height: 50px; } .divTwo { background-color: yellow; max-width: 60px; max-height: 200px; } </style> </head> <body> <div class="divOne"></div> <div class="divTwo">This is some random text.</div> </body> </html>
Now when you view that you'll see that our div two element has gone to 60 pixels wide and made our text go onto a new line because it's going over the 60 pixel limit, this can be very useful if you have a website with lot's of images and you don't want any of the images to end up wider then the element they're in.

Page generated in 0.0055 seconds.