SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying To Get Two Columns Side By Side

    I am wanting the DIV #col2 to set beside the DIV #col1. Can someone help me with my CSS? Do I need to clear:both?

    Here is what I am trying to make it look like.

    LINK-
    http://www.t2graphicdesign.com/applical/



    HTML
    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>
    <title>Applical | Signs, Banners, Vehicle Wraps, Point-Of-Purchase Displays, Tradeshow Displays, Decals, Custom Printed Items</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="c/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body bgcolor="#FFFFFF">
    <div id="wrapper">
    <div id="content">
    <div id="masthead"><a href="contact.php"><img src="i/gfx_phone.gif" alt="" width="140" height="22" border="0" id="gfx_phone" /></a></div>
    <div id="flash"><img id="gfx_flash" src="i/gfx_flash.jpg" width="840" height="324" alt="" /></div>
    <div id="nav"><img id="gfx_nav" src="i/gfx_nav.png" width="840" height="63" alt="" /></div>
    <div id="col1">
      <p class="content"><span class="header">Recent News</span><br />
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus  placerat iaculis.</p>
      <p class="content"><a href="#">&gt;&gt; READ THIS ARTICLE</a></p></div>
    <div id="col2"><img id="gfx_promo1" src="i/gfx_promo1.png" width="293" height="194" alt="" /></div>
    <div id="promos"><img id="gfx_promo6" src="i/gfx_promo2.png" width="298" height="106" alt="" /><img id="gfx_promo7" src="i/gfx_promo3.png" width="249" height="106" alt="" /><img id="gfx_promo8" src="i/gfx_promo4.png" width="293" height="106" alt="" /></div>
    <img id="gfx_bkg_btm" src="i/gfx_bkg_btm.jpg" width="840" height="5" alt="" /></div>
    <div id="footer"><img id="gfx_footer" src="i/gfx_footer.png" width="840" height="50" alt="" /></div>
    </div>
    </body>
    </html>

    CSS
    Code:
    @charset "UTF-8";
    body {
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	background-color: #666666;
    	background-image: url(../i/gfx_bkg.gif);
    }
    #wrapper {
    	width: 840px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 20px;
    	margin-left: auto;
    	padding: 0px;
    }
    #masthead img {
    	margin-left: 700px;
    }
    #masthead {
    	background-color: #FFFFFF;
    	padding-top: 18px;
    }
    #footer {
    	margin-top: 9px;
    	margin-right: 0px;
    	margin-bottom: 9px;
    	margin-left: 0px;
    }
    #content {
    	background-image: url(i/gfx_bkg_btm.jpg);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    #col1 {
    	width: 547px;
    	height: 169px;
    	float: left;
    	background-color: #FFFFFF;
    	background-image: url(../i/gfx_col1_bkg.png);
    	background-repeat: no-repeat;
    	padding-top: 25px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    *   display: inline;*
    }	
    #col1 p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	text-align: left;
    	padding-left: 70px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    #col2 {
    	width: 293px;
    	height: 194px;
    	float: left;
    	margin-left: 547px;
    	background-color: #FFFFFF;
    	background-image: url(../i/gfx_col2_bkg.png);
    	background-repeat: no-repeat;
    *   display: inline;*
    }
    .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #333333;
    	text-align: left;
    	padding-left: 70px;
    	padding-right: 35px;
    	line-height: 18px;
    }
    #col1 .header {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-align: left;
    	font-weight: bold;
    }
    #col1 .content a {
    	font-size: 9px;
    	font-weight: bolder;
    	color: #BE0C20;
    	text-transform: uppercase;
    	text-decoration: none;
    	line-height: 0px;
    }
    Todd Temple > T2 Design

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your problem is this rule under #col2:
    Code:
    margin-left: 547px;

  3. #3
    SitePoint Zealot Rexibit's Avatar
    Join Date
    Jul 2008
    Location
    United States
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, make the margin-left for the second column further away, and you might even try removing it's float.
    Rexibit Web Services
    Don't just build it - CSS it


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
  •