SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Border on 2 columns not working

    I have done a web page with a 2 column layout for the content, each with borders, but are not joining together, but leaving a small gap. I know this is to do with my margin %, but if I make them add to 100%, then the 2nd column drops down. Looked around the net, but seem to be asking the wrong questions!!

    Any help appreciated.

    My html:
    Code HTML4Strict:
     <div id = "content">
     
            	<div id = "aboutleft">
     
                </div>
     
                <div id = "aboutright">
                	<p class = "style3"> P..... Writer/Director </p>
     
                    <p>&nbsp;</p>
     
                    <p>Peter i...............................</p>
     
                </div>
     
            </div>

    My CSS:
    Code CSS:
    #content {
    	background-color: #11190f;
    	width: 80%;
    	margin: auto;
    }
    #aboutleft {
    	float: left;
    	width: 49%;
    	background-image: url(images/ptn.jpg);
    	background-repeat: no-repeat;
    	background-position: center;
    	height: 181px;
    	background-color: #11190f;
    	border-top: 1px solid #54776a;
    	border-left: 1px solid #54776a;
    	border-bottom: 1px solid #54776a;	
    }
     
    #aboutright {
    	float: right;
    	width: 50%;
    	height: 181px;
    	margin: 0;
    	background-color: #11190f;
    	color: #fff;
    	border-top: 1px solid #54776a;
    	border-right: 1px solid #54776a;
    	border-bottom: 1px solid #54776a;
     
    }

    The link is About Peter T Nathan

    Thanks,
    Vicki

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can't mix px and % like that. What I would recommend is to have a wrapper with that border on it, and then inside that place a left and right div with % widths.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You could do it like this without using extra wrappers.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #content {
    	background: #11190f;
    	width: 80%;
    	margin: auto;
    }
    #aboutleft {
    	float: left;
    	width: 50%;
    	background:#11190f url(images/ptn.jpg) no-repeat 50%;
    	border: 1px solid #54776a;
    	overflow:hidden;
    	margin-right:-1px;
    	color: #fff;
    	min-height:181px;
    }
    * html #aboutleft{margin-right:-4px}/* ie6 3 pixel jog*/
    #aboutright {
    	background: #11190f;
    	color: #fff;
    	border: 1px solid #54776a;
    	overflow:hidden;
    	zoom:1.0;
    	min-height:181px;
    }
    </style>
    </head>
    <body>
    <div id="content">
    	<div id="aboutleft">
    		<p>left content</p>
    		<p>left content</p>
    		<p>left content</p>
    		<p>left content</p>
    	</div>
    	<div id="aboutright">
    		<p class = "style3"> P..... Writer/Director </p>
    		<p>Peter i...............................</p>
    		<p>Right content</p>
    		<p>right content</p>
    	</div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. I got it to work on my 2 column and on a 3 column where I had the same problem. I can now stop pulling my hair out.

    Vicki


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
  •