SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)

    A <div> inside of a <div>

    I am trying to make a layout like the following:



    Where there are <div>s inside of a "parent" <div>. Is this possible? If so, how does it work? Everytime I try to do something like it the inner <div>s use the entire page for width... Any help would be appreciated.

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Yes, that is possible. In fact, I'm doing that in the site I'm building (100% css so far - no tables). I've got it on my laptop right now, but I'll try to post the code for it later.

    If you need it right now, go over to vinnies site. He's using that a lot (and I've used it as a reference). Or you can go to any one of the sites from the CSS competition and get the css code for it. The menus would be a good example of code to look at.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.brainjar.com/css/positioning/

    think that should help...
    Daniel Balsdon
    My Site

  4. #4
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Dave,
    Whenever you get a chance is fine.

    dbalsdon,
    Thanks for the link!

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Are you looking for a static width or fluid layout?

  6. #6
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I am pretty sure I want static. Are there any advantages to a fluid one?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann
    I am pretty sure I want static. Are there any advantages to a fluid one?
    No one is really any better than the other. Static is usually easier for people since you can calculate everything in pixels rather than a mix of pixels, percents, etc.

    Here's a simple version of what you want:
    CSS:
    Code:
    body {
      /*for IE5/Windows*/
      text-align: center;
    }
    #container {
      width: 798px;
      position: relative;
      top: 0;
      left: 0;
      border: 1px solid black;
      /*for the other browsers*/
      text-align: left;
      margin: 0px auto;
     
    }
    #header {
      height: 150px;
      border-bottom: 1px solid black;
    } 
    #content {
      /*leave room for the menu*/
      margin-right: 180px;
      border-right: 1px solid black;
    }
    #menu {
      position: absolute;
      top: 151px;
      right: 0;
      width: 170px;
    }
    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>Static and Centered</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
    <div id="container">
      <div id="header">
        <p>Header here</p>
      </div>
      <div id="content"> 
        <p>Content!</p>
      </div>
      <div id="menu">
       <p>Menu!</p>
      </div>
    </div>
    </body>
    </html>
    Let me know if that works .

  8. #8
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Vinnie,

    That works but the divider on the right side of the content seperating it from the menu doesn't go all the way to the top and bottom... I can't seem to figure it out.
    To give you an idea of the look I am going for -> http://www.greasyskillet.org

  9. #9
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Any ideas oh mighty Vinnie??

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hartmann
    Any ideas oh mighty Vinnie??
    Why yes as a matter of fact . This works in IE6, Firebird, and Opera 7.1 for me:
    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>Static and Centered</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <style type="text/css">
    	body { 
    	/*for IE5/Windows*/ 
    	text-align: center; 
    	} 
    	#container { width: 798px; 
    	position: relative; 
    	border: 1px solid black; 
    	/*for the other browsers*/ 
    	text-align: left; 
    	margin: 0px auto; 
    	} 
    	#header { 
    	height: 150px; 
    	border-bottom: 1px solid black; 
    	margin: 0; 
    	padding: 0; 
    	width: 100%;
    	} 
    	div#content { 
    	/*leave room for the menu*/ 
    	width: 619px;
    	border-right: 1px solid black; 
    	padding: 0;
    	margin: 0;
    	height: 100%;
    	} 
    	html > body #content, html > body #menu {
    		/*for mozilla to render the border all the way down*/
    		display: table-cell;
    		/*unstick #menu, bring it into the normal document flow*/
    		position: static;
    	}
    	#menu {
    	position: absolute;
    	top: 151px;
    	right: 0;
    	width: 170px;
    	left: 631px;
    }
    </style>
    </head> 
    <body> 
    <div id="container">  
    <div id="header">  
    <p>Header here</p>  
    </div>  
    <div id="content"> 
    <p>Content!</p>  
    </div>  
    <div id="menu">  
    <p>Menu!</p>  
    </div> 
    </div> 
    </body> 
    </html> 

  11. #11
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You must spread some Reputation around before giving it to vgarcia again.


    Thanks!


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
  •