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
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    div width to change to 100% - 170px

    Is it possible to have for example a div starting at top: 170px; and left: 190px; to expand from that point to the right side of the page with a right margin of 20px?

    So for example
    this is how the two divs would sit next to each other
    Excuse my crappy ASCII art:
    Code:
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    |__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
    Where the |'s would be the browser's window; the __ would be a 20px margin; the #'s would be a menu/nav type thing and the &'s would be the content. I'm trying to get the content to change width as the browser window shrinks/grows without having to have scroll bars.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes its possible but I'm telling you right its not going to be easy using absolute positioning so stop using it when you don't have to. Look at this example
    http://bonrouge.com/2c-hf-fluid.php

    Good luck.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Tried following the guide *somewhat* to fit it to my needs, but still getting the overextended column
    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=gb2312" />
    <title>The Streets :: Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="container">
    
    	<div id="menu">
    		<div class="menuimg">
    			<img src="images/menu_top.jpg" alt="Menu Top Image" />
    		</div>
    		<div class="menucont">
    			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    		</div>
    		<div class="menuimg">
    			<img src="images/menu_bot.jpg" alt="Menu Bot Image" />
    		</div>
    	</div>
    	
    <!----Split Menu and Content---->
    
    	<div id="content">
    		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	</div>
    
    </div>
    </body>
    </html>
    CSS
    Code:
    * {
    border: 1px solid #00FF00;
    }
    
    body {
    background: url(images/head_bg.jpg) 0 0 repeat-x #212121;
    margin: 0;
    padding: 0;
    }
    
    #container {
    position: relative;
    margin: 170px 20px 20px;
    width: 100%;
    display: block;
    }
    
    #menu {
    float: left;
    }
    
    .menucont {
    background: url(images/menu_bg.jpg) repeat;
    width: 150px;
    }
    
    .menuimg {
    height: 25px;
    width: 150px;
    }
    
    #content {
    position: relative;
    border: 1px solid #FFFFFF;
    position: relative;
    width: 100%;
    margin: 0 170px;
    }

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Nevermind, I fixed it. Thanks for the help once again aerospace. I just had to get rid of the 100% width and then change my margins around a bit.

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    * {
    border: 1px solid #00FF00;
    }
    Are you adding that for the sake of layout debugging?

    If so, you should consider using another property* as adding borders will add height and width to elements, often pushing the layout out of line, rather than showing the layout as it currently appears.

    (* if you know which elements are acting up, consider adding a prominent background-color to them alone to highlight them.

    Alternatively, if you're debugging the layout in Firefox, check out the Aardvark extension.)

  • #6
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Yes, the border was these for debugging purposes. I'll check out that link too!


  •  

    Posting Permissions

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