Newbie CSS Page Layout Question

Discussion in 'CSS' started by hemanthjava, Sep 16, 2011.

0
  1. #1
    Hi,

    If you run the HTML File. You will observe 3 Columns that are mapped to .column1of3, .column2of3, .column3of3 in css.

    I have a question on How to decide the width size of these columns.

    Basically #frame is 960px width

    Now when I try to add the sum of the columns width + margin width + border. It does not come up to 960px. But it is still appropriately placed.

    280 + 280 + 280 = 840
    Border of Page = 10 + 10 = 20
    Margin for Columns = 20 + 20 = 40

    So total is 840 + 20 + 40 = 900 which is much less than 960.

    How?

    Page HTML

    
<?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>
    <link rel="stylesheet" type="text/css" href="ch09_eg04.css" />
  </head> 
  <body>
    <div id="frame">
	  <div id="page">

        <div id="header">header</div>
        <div id="navigation">navigation</div>
		
        <div class="column1of3">column 1 of 3</div>
        <div class="column2of3">column 2 of 3</div>
        <div class="column3of3">column 3 of 3</div>

        <div id="footer">footer</div>

      </div>
    </div>
  </body>
</html>
    Code (markup):
    Page CSS

    body {
	margin:0px;
	background-color:#000000;
	font-family:arial, verdana, sans-serif;
	text-align:center;}

#frame {
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	width:960px;
	background-image:url("images/960px_12_col_grid.gif");
	background-repeat:repeat-y;}

#page {
	margin:0px 10px 10px 10px;}

#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;}

/* 3 columns */
.column1of3, .column2of3, .column3of3 {
	float:left;
	width:280px;
	background-color:#cccccc;
	padding:10px;
	margin-top:10px;
	height:173px;}

.column1of3, .column2of3, .columns1and2of3 {margin-right:20px;}
}
    Code (markup):
     
    hemanthjava, Sep 16, 2011 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Because you set the margins to auto so they adjust to the width.
    btw, while using the xml prologue, the first line of your html, is entirely correct, that is an xml element but you are not serving it as xhtml and most versions of IE will go into quirks mode (cause IE is not a modern browser). You can safely remove that line.
     
    drhowarddrfine, Sep 16, 2011 IP