SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 columns problem

    I am getting better at all thing css but i currently have a problme which I cant solve. This is what I want

    I have a 660px wide container called #content. I want this split into 2 sections: #top and #bot.

    #top has 2 sections of its own. #top_left and #top_right which I both want to be 330px in size with a 1 px grey line runing verticaly between them. They are side by side. Both #top_left and #top_right have a left and right margin of 10px.

    Between #top and #bot there should be a 1px horzontal line grey in colour. This should form an upside down T with the verticle line between #yop_left and #top_right.

    The idea is that no matter how big #top_left and top_right is there section in comparsion stay the same size.

    I just cant get this to work any help would be great.
    HTML Code:
    <div id="content">
    		<div id="top">
    			<div id="top_left">top left</div>
    			<div id="top_right">top right</div>
    		</div><!-- end top -->
    		<div id="bot">bottom</div><!-- end bot -->
    	</div><!-- end content -->

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK got it working kind of by using some background images for the grey lines. But in firefox there is a a 1px line missing on the blue navigation bar thing. Any ideas?

    heres the site and hers is the code

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My site</title></title>
    <style type="text/css">
    <!--
    body {
    	background-color: #EEE;
    	font-family: "Times New Roman", Times, serif;
    	color: #000;
    }
    #container {
    	width: 700px;
    	margin: 0px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #FFF;
    }
    #nav {
    	background-color: #006;
    	visibility: visible;
    	width: 700px;
    }
    #nav ul {
    	margin-left: 0;
    	padding-left: 0;
    	display: inline;
    }
    #nav ul li {
    	padding: 3px 15px;
    	list-style: none;
    	display: inline;
    }
    #nav a {
    	color: #FFF;
    	text-decoration:none;
    	font-weight: bold;
    }
    #nav a:hover {
    	color: #D42B1D;
    }
    #content {
    	margin: 0px;
    	margin-left: auto;
    	margin-right: auto;
    	width:	660px;
    }
    #top {
    	visibility: visible;
    	width: 660px;
    	background-image: url(images/bk.png);
    	background-repeat: repeat-y;
    }
    #bot {
    	visibility: visible;
    	width: 660px;
    	background-image: url(images/bot.png);
    	background-repeat: repeat-x;
    }
    #top_left {
    	width:229;
    	float: left;
    	margin:0px;
    }
    #top_right {
    	width: 330;
    	float: right;
    	margin:0px;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="nav">
    		<ul>
    			<li><a href="schedule.html">Schedule</a></li>
    			<li><a href="about.html">About</a></li>
    			<li><a href="committee.html">Committee</a></li>
    			<li><a href="contact.html">Contact</a></li>
    		</ul>
    	</div><!-- end nav -->
    	<div id="content">
    		<div id="top">
    			<div id="top_left">
    			  <p>top lef</p>
    			  <p>this is a teast it should work </p>
    			</div>
    			<div id="top_right">top right</div>
    			<div class="clearer"></div>
    		</div><!-- end top -->
    		<div id="bot">bottom</div><!-- end bot -->
    	</div><!-- end content -->
    </div><!-- end container -->
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also i cant seem to get #top_right to align to the left?

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I take it back it doesnt work when you increasse the contentto more than a few words. Any ideas? At least the lines are in the right place :-)

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm still not luck, any ideas?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi

    Sorry I missed the thread

    Your link wasn't working so I couldn't see what you'd already got. If I understand you correctly then it sounds as though you are going the right way about it.

    Just float a container left and a container right. These should both be inside the same parent container. Repeat the background image down down the centre of the outer container to get your everlasting border.

    Put a border bottom on the outer container and include a clearing div before the closing div of the outer. Thats about all there is to it.

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's your code altered a bit.

    Replace the bg image with an image of your own.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My site</title></title>
    <style type="text/css">
    <!--
    body {
     background-color: #EEE;
     font-family: "Times New Roman", Times, serif;
     color: #000;
    }
    #container {
     width: 700px;
     margin: 0px;
     margin-left: auto;
     margin-right: auto;
     background-color: #FFF;
    }
    ul#nav  {
     background-color: #006;
     width: 700px;
     margin: 0;
     padding: 0;
    }
    ul#nav li {
     padding: 3px 15px;
     list-style: none;
     display: inline;
    }
    #nav a {
     color: #FFF;
     text-decoration:none;
     font-weight: bold;
    }
    #nav a:hover {color: #D42B1D;}
    #content {
     margin:1px 0px;
     margin-left: auto;
     margin-right: auto;
     width: 660px;
     background:url(images/vertical.jpg) repeat-y center center;
     border-bottom:1px solid #000;
    }
    * html #content {margin-top:0}/*fix margin*/
    #bot {width: 660px;margin:auto}
    #top_left {
     width:229px;
     float: left;
     margin:0px;
    }
    #top_right {
     width:229px;
     float: right;
     margin:0px;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    div>p {margin-top:0}
    -->
    </style>
    </head>
    <body>
    <div id="container"> 
    	<ul id="nav">
    	  <li><a href="schedule.html">Schedule </a></li>
    	  <li><a href="about.html">About </a></li>
    	  <li><a href="committee.html">Committee </a></li>
    	  <li><a href="contact.html">Contact </a></li>
    	<br />
     </ul>
      <div id="content"> 
    	  <div id="top_left"> 
    		<p>top left</p>
    		<p>this is a test it should work </p>
    	  </div>
    	  <div id="top_right">top right</div>
    	  <div class="clearer"></div>
      </div>
      <!-- end content -->
      <div id="bot">bottom</div>
      <!-- end bot -->
    </div>
    <!-- end container -->
    </body>
    </html>
    I don't know why moz moves the floats up one pixel so I just moved them down with brute force.

    Hope that helps anyway.

    Paul

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou very much, implemented it and it theres no problems, will study the code later to see what ou change. Good work!


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
  •