SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict savagepriest's Avatar
    Join Date
    Mar 2006
    Location
    India
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy where am I going wrong

    since morning I am busy with this layout but failed
    the left and right divs are not coming in same line

    please help me with the 2 column basic layout.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html>
    <
    head>
    <
    title>S.U.D.A Uttar Pradesh</title>
    <
    link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </
    head>
    <
    body>

    <
    div id="header"></div>
    <
    div id="menu">

    <
    div id="menu1"></div>
    </
    div>

    <
    div id="container">
      <
    div id="left"></div>
      <
    div id="right"></div>
      </
    div>

    </
    body>
    </
    html
    here is the css
    Code:
    /* CSS Document */
    *{padding:0px;
    margin:0px;
    }
    a{text-decoration:none}
    body{text-align:center; margin:0px; padding:0px;
    	font:narad,Georgia, "Times New Roman", Times, serif;
    	}
    #header
    	{
    	background-color:#009900;
    	height:150px;
    	width:770px;
    	}
    #menu{
    	width:770px;
    	margin:0px auto;
    	border:solid 1px black;
    	height:43px;
    	}
    #container{
    	width:770px;
    	margin:0px auto;
    	text-align:left;
    	}
    #left
    	{
    	float:left;
    	width:150px;
    	color: #99CCFF;
    	border:solid 1px red;
    	}
    #right
    	{
    	width:620px;
    	height:20px;
    	background-color:#33CC33;
    	margin-left:150px;
    	margin-top:20px;
    	border:solid 1px green;
    	}

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Frstly, you have a top margin of 20px on #right, so it will be that much lower than #left for starters. As #left has no content and no height defined, it collapses to nothing more than the borders in FF. AS you have defined sizes (height and width) for #right, you have invoked IE6's 3px jog, which means #right no longer fits in the available space (which it wouldn't anyway as the border widths were not taken into account when calculating total widths).

    If you put some content in #left and #right (even just a test word in each), and do not specify any sizes for #right (it will naturally expand to available width), and change #right's left margin to take into account the total width of #left (including its borders), then things work better :
    Code:
    #right
    	{
    	background-color:#33CC33;
    	margin-left:152px;
    	border:solid 1px green;
    	}

  3. #3
    SitePoint Addict savagepriest's Avatar
    Join Date
    Mar 2006
    Location
    India
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok let me try and revert back thanks a lot centauri

  4. #4
    SitePoint Addict savagepriest's Avatar
    Join Date
    Mar 2006
    Location
    India
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great let me complete the whole layout and show it to you all thanks again Centauri

  5. #5
    SitePoint Addict savagepriest's Avatar
    Join Date
    Mar 2006
    Location
    India
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    layout complete here is a working site

    www.sudaup.org


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •