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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS width take up remainder of page.

    Hey, new user, found the site while looking for a fix for my css thought you might be able to help.

    Currently making a listing template for my works ebay listings and have encountered a problem. Here is my code...

    THE CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body {
    margin:0px 0px 0px 0px; 
    padding:0px 0px 10px 0px; 
    font-family: Arial, Helvetica, sans-serif;
    width: 97%;
    }
    h1 {
    font-family: Arial, Helvetica, sans-serif;
    margin:-5px 0px -5px 0px; 
    padding:0px 0px 0px 0px; 
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    margin:-10px 0px -5px 0px; 
    padding:0px 0px 0px 0px; 
    font-size: 1.4pc;
    color: #336633;
    }
    
    #container {
    margin:20px 3% 0px 3%;
    border-width: 1px;
    border-style: solid;
    border-color: #336633; 
    width: 100%;
    overflow: auto;
    v
    }
    
    #header {
    border-bottom-width: 8px;
    border-bottom-style: solid;
    border-bottom-color: #336633; 
    height: 101px;
    }
    	.header-left-element {
    	float:left;
    	}
    	.header-right-element {
    	float: right;
    	}
    
    #leftdivision {
    float:left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #336633;
    margin: 0px 225px 0px 0px;
    }
    	#article {
    	border-width: 1px;
    	border-style: solid;
    	border-color: #336633; 
    	margin: 15px 15px 25px 10px;
    	padding: 30px 40px 30px 20px;
    	} 
    
    
    #rightdivision {
    float: right;
    margin-left:-226px;
    width: 225px;
    padding: 15px 0px 10px 0px;
    }
    #infobox {
    border-width: 1px;
    border-style: solid;
    border-color: #336633; 
    margin: 0px 10px 15px 15px;
    font-size: 0.71pc;
    }
    	.infobox-header {
    	background-color: #336633;
    	border-bottom-width: 1px;
    	border-bottom-color: #336633;
    	border-bottom-style: solid;
    	color: #FFFFFF;
    	font-weight: bold;
    	padding: 2px 10px 1px 10px;
    	}
    	.infobox-text {
    	padding: 10px 15px 17px 10px;
    	line-height: 1.15;
    	}
    THE 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=utf-8" />
    <title>Untitled Document</title>
    <LINK REL=stylesheet HREF="ebaycss.css" TYPE="text/css">
    </head>
    
    <body>
    	<div id="container">
        	<div id="header">
            	<div class="header-left-element">
    			<img src="Logo2.jpg">
     			</div>
    
      			<div class="header-right-element">
     			<img src="\Logo.jpg">
     			</div>
            </div>
            
            <div id="leftdivision">
            	<div id="article"><h1>DELUXE BOILERSUIT</h1><br /><h2>Price £59.99</h1><br />
    
    			</div>
            </div>
            <div id="rightdivision">
            	<div id="infobox">
    			<div class="infobox-header">Seller Information</div>
    			<div class="infobox-text">Thanks for stopping by my auction. I have been an ebay member since Sept. 1998. While I haven't bought or sold a lot over the years, all of my feedback so far has been positive. I have accumulated a number of items over the past couple of years that I am now trying to make a concerted effort to part with before the holidays. Of course, my primary motivation for selling the items is to use the money to purchase a new digital camera. </div>
    			</div>
    			<div id="infobox">
    			<div class="infobox-header">Payment & Shipping</div>
    			<div class="infobox-text">Thanks for stopping by my auction. I have been an ebay member since Sept. 1998. While I haven't bought or sold a lot over the years, all of my feedback so far has been positive. I have accumulated a number of items over the past couple of years that I am now trying to make a concerted effort to part with before the holidays.</div>
    			</div>
                <div id="infobox">
    			<div class="infobox-header">Sales Policy</div>
    			<div class="infobox-text">Thanks for stopping by my auction. I have been an ebay member since Sept. 1998. While I haven't bought or sold a lot over the years, all of my feedback so far has been positive. I have accumulated a number of items over the past couple of years that I am now trying to make a concerted effort to part with before the holidays.</div>
    			</div>
            </div>
        </div>
    
    </body>
    </html>
    Please ignore the random text it's all placeholder atm.

    My problem is I want the left column to fill the remainder of the page the sidebar isnt taking up but I can't see a way to do it. I don't want to give it a fixed width as it needs to allow for smaller sized screens.

    Any help you could give would be apreciated.
    .scott

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    To make a 2 column layout, there is no need to put floats and/or widths for both columns.
    Take a look at http://bonrouge.com/2c-hf-fluid.php to see a good fluid 2 column
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, that's solved a far few problems.

    But one question, how would I get the 'right' div to expand to the top of the footer?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You may need to use faux columns
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Would it be possible to use that method to create a single 1 pixel wide vertical rule which can be placed relative to the right side of a div?

    edit: nevermind, got it. Thanks again abduraooft
    Last edited by whatwhat212; 03-23-2009 at 11:19 AM.


  •  

    Posting Permissions

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