Column with min and max width : max width « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. max width

Column with min and max width

  


<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Layout Example</title>
<style type='text/css'>
body {
  margin:0px;
  background-color:#ffffff;
  font-family:arial, verdana, sans-serif;}

#header {
  background-color:#cccccc;
  padding:10px;
  height:120px;}

#navigation {
  background-color:#efefef;
  padding:10px;
  height:40px;}

#footer {
  background-color:#cccccc;
  padding:10px;
  height:40px;
  clear:both;
  border-top:20px solid #ffffff;}

.column1of3, .column2of3, .column3of3 {
  float:left;
  width:28%;
    margin-left:2%;
  background-color:#cccccc;
  padding:1%;
  margin-top:20px;
  height:175px;
  min-width:210px;
  max-width:400px;}

#header, #navigation, #footer, .columns123 {min-width:750px;}
</style>

  </head> 
  <body>
    <div id="header">header</div>
    <div id="navigation">navigation</div>
<div class="columns123">
    <div class="column1of3"><img src="http://java2s.com/style/logo.png" width="200" height="75" alt="Golden Section" />column 1 of 3</div>
    <div class="column2of3">column 2 of 3</div>
    <div class="column3of3">column 3 of 3</div>
</div>
    <div id="footer">footer</div>
  </body>
</html>








Related examples in the same category

1.max-width: 500px
2.max width
3.max-width: 714px