Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Fluid column with border and 1 center content

    I have been struggling since yesterday. What I am trying to achieve something like OfficeDepot has Center Content and around it a border. Can this be done.

    Here is the code:

    Code:
    <html>
    <style type="text/css">
    
    body
    {
    	background-color: #EFEFEF;
    }
    
    #wrapper { width:100%; float:left; }
    
    #left { width:auto;
            background: url('left.gif') left repeat-x;
            float:left;
    }
    
    #right {
            width:auto;
            background: url('right.gif') right repeat-x;
    				float:left;
    }
    
    #main {width:980px;
          margin-left:auto;
    			margin-right:auto;
    			float:left;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="left"></div>
    
    <div id="main"><p>main</p></div>
    
    <div id="right"></div>
    
    </div>
    
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello codingisfun,
    I'm not sure what your left and right gifs look like but the officedepot.com site I'm looking at is just a containing div centered over this background image.


    In your code, it looks like you are attempting a 3 column layout. Your blanket use of float:left; is not helping though. We use float to put elements beside each other so anything that has a width of 100% does not need to be floated.

    Maybe it would help for you to take a look at a couple examples. Goto http://nopeople.com/design/CSS%20tips/index.html and see if there is a layout you like there. Use the View Source from your browser to see how those are coded.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did some home work and here is a code. There is still a small problem. Right image is not aligned top and not aligned to left image. What am I doing wrong? Thanks.

    Code:
    <head>
    <style type="text/css">
    
    body
    {
    	background-color: #EFEFEF;
    }
    
    #main {
      margin: 0 auto;
      width: 960px;
    }
    
    #left {
       height: 100%;
       padding: 15px;
       background: url('wrap1.gif') top left repeat-y;
       
     }
    
    #right {
       height: 100%;
       padding: 15px;
       background: url('wrap2.gif') top right repeat-y;
     }
    
    </style>
    </head>
    
    <body>
    <div id="main">
    <div id="left">
    <div id="right">
       <div>
             Main Content here
       </div>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails 2 Fluid column with border and 1 center content-wrap1.gif   2 Fluid column with border and 1 center content-wrap2.gif   2 Fluid column with border and 1 center content-sample.jpg  

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I did some home work and here is a code. There is still a small problem. Right image is not aligned top and not aligned to left image. What am I doing wrong?
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    When doing a shadow like that, I find it easier to nest a couple divs. Like this -
    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">
    html, body {
    	background: #efefef;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #main {
    	width: 1000px;
    	margin: 0 auto;
    	background: url(wrap1.gif) repeat-y left;
    }
    #wrap {
    	width: 1000px;
    	background: url(wrap2.gif) repeat-y right;	
    }
    #content {
    	width: 960px;
    	height: 500px;
    	margin: 0 auto;
    	background: #ccc;
    }
    </style>
    </head>
    <body>
        <div id="main">
            <div id="wrap">
                <div id="content">
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                <!--end content--></div>
            <!--end wrap--></div>
        <!--end main--></div>
    </body>
    </html>
    Instead of using 5,000px tall images, those could be cropped down to 20px by 1px and the repeat-y part of the CSS would make them appear the full height of their container.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow. You are life saver. Thanks a lot.


  •  

    Posting Permissions

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