Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    CPW
    CPW is offline
    Member
    Join Date
    Sep 2006
    Posts
    53
    Member #
    13935
    I'm designing a website for somebody and have finally decided to get away from tables and use div elements instead. I have found them to be very useful, but I have a problem that I cannot seem to figure out.
    On all of the pages, it goes like this: There is a "top" div at the top that displays the logo, etc. There is a "left" div that has a menu in it. There is a "main" div that sits to the right of the "left" div and below the "top" div that displays the main contents of the page. Below all of that I have a "bottom" div that contains and address, phone number, and fax number.
    My problem is this: I need to make the "bottom" div stay below everything else but I cannot figure out how. All of the div elements are using absolute positioning, so I cannot figure out how to position the "bottom" div so that it stays below everything else and moves down if there is a lot of text in the "main" div. Basically I need to do what a table would do if I had three rows: top, middle (containing menu on left and contents on right), and bottom. The bottom row would move down if the contents of the middle row got bigger. I need to do this with divs using absolute positioning.
    Thanks for the help.

  2.  

  3. #2
    Senior Member simpleurl's Avatar
    Join Date
    Jul 2006
    Location
    Leicester, UK.
    Posts
    150
    Member #
    13598
    I think that if you used a little trick in css you could acomplish this...
    #footer{
    float: left;
    clear: both;
    }
    If this is no use, I suggest posting your page so that people can view all of your code and the design.

  4. #3
    CPW
    CPW is offline
    Member
    Join Date
    Sep 2006
    Posts
    53
    Member #
    13935
    Thanks but that didn't work. I'm going to post some code so you can see my layout. This is not my actual page, this is just how I layed out the page. It looks really bad, but you'll be able to easily see what I'm talking about.
    Just make this code into an html page and view it:
    Code:
    <html>
     <head>
      <title></title>
      <meta http-equiv="Content-Language" content="en-us">
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <style type="text/css">
       body { background: #FFEFD1; background-repeat: repeat-y; }
       div.top { position: absolute; top: 0px; left: 0px; height: 150px; width: 800px; background: green; }
       div.left { position: absolute; top: 150px; left: 0px; height: 300px; width: 200px; background: red; }
       div.main { position: absolute; top: 150px; left: 200px; width: 600px; background: blue; }
       div.bottom { position: absolute; bottom: 0px; background: yellow; }
      </style>
     </head> 
     <body>  
      <div class="top">
       Logo would go here.   
      </div>
      <div class="left">
       Menu Here</div>  
      <div class="main">
       <div id="image">
        There would be a picture here.
        </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
       </div>
       <div id="text">
        <p>There's a bunch of text here.
        </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p>The bunch of text ends about here, maybe not exactly.</p>
       </div>
      </div>
      <div class="bottom">
       This is the footer that needs to be below everything else no matter how much space everything else takes up.</div>
     </body>
    </html>
    Thanks for the help everyone.

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Well, first of all, the syntax & heirarchy are less than perfect, and I would almost argue you have IDs and classes confused. But, that would not matter in this case, only as you get into more complicated layouts.

    The solution to your problem is making containers. I generally make a container for the WHOLE layout. I then have everything that is on the same horizontal level in a container, for instance the navigation and content from above.

    A suggestion: absolute positioning tends to cause problems when you're working w/ dynamic content, and sometimes across browsers. Better to use relative.

    To make things appear next to each other, I like to use floats. All floats have to be cleared!

    Here's your stripped down, cleaned up, annotated layout.

    HTML Code:
    <html>
    <head>
    <title>simple css layout from DCScene</title>
    <style type="text/css">
    #container	{position: relative; width: 800px; }
    #top		{position: relative; width: 800px; background-color: green;}
    #main		{position: relative; width: 800px;}
    #left		{position: relative; width: 200px; float: left;  background-color: red;}
    #right		{position: relative; width: 600px; float: left; background-color: blue;}
    #footer		{position: relative; width: 800px; background-color: yellow;}
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="top">Here's where the logo goes</div><!--end top-->
    	<div id="main">
    		<div id="left">Here's the navigation stuff</div><!--end left-->
    		<div id="right">Here's the bunches of text, images and other content<br/><br/><br/><br/><br/><br/>
    					more content and stuff<br/><br/><br/><br/>
    					etc. etc. etc.<br/><br/>
    		</div><!--end right-->
    		<br style="clear:both" /><!--I have been known to make a .clear style and simply make a div class="clear" but this works as well.-->
    	</div><!--end main-->
    	<div id="footer">All the footer info such as the address & stuff :-)</div>
    </div><!--end container-->
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    CPW
    CPW is offline
    Member
    Join Date
    Sep 2006
    Posts
    53
    Member #
    13935
    Well, first of all, the syntax & heirarchy are less than perfect, and I would almost argue you have IDs and classes confused. But, that would not matter in this case, only as you get into more complicated layouts.
    I know it's pretty sloppy. I mostly just threw it together for the example. As for the IDs and classes, I did that before I understood the difference (which I just learned recently) and forgot to change it to the correct way. The <br> elements (which should have the self-closing "/" like you put) and stuff were just thrown in to make the div bigger for the example. Usually I make everything very organized, I just didn't feel like spending a lot of time making the example. I just wanted to show what I was talking about.
    Anyway, thanks so much for the example and suggestions! I didn't really want to use absolute positioning, but I didn't know how else to make two divs sid-by-side. Thank you for showing me how to do that. I am now going to redesign my page based on your example and I am going to use relative positioning. Thanks!
    One thing, though. Is there any other way to make two div elements (is that the correct way to say it - div element?) appear next to each other? I'm mostly just curious.

  7. #6
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    That's a simple task. I've found the following method works fine in all the browsers I've tested (and even in Dreamweaver's design window).

    Use the following CSS:

    HTML Code:
    <html>
    <head>
    
    <style type="text/css">
    #container {
    width: 800px;
    }
    
    #leftdiv {
    width: 300px;
    float: left;
    margin: 0;
    padding: 0;
    }
    
    #rightdiv {
    width: 500px;
    float: left;
    margin: 0;
    padding: 0;
    }
    
    #footer {
    clear: both;
    }
    </style>
    
    </head>
    
    <body>
    
    <div id='container'>
    <div id='leftdiv'></div>
    <div id='rightdiv'></div>
    <div id='footer'></div>
    </div>
    
    </body>
    </html>
    If you want padding or a margin in any of the floated divs, you need to subtract the sum of the left and right margins/padding from the width of the div. If you don't do that, the layout breaks.

    For example, if you set the margin to 5px all round, you need to take 10px from the width. If you set the padding to 3px all round, you'll need to take 6px from the width. It's the same with anything that affects the width, such as borders too. Changing the top and bottom style of anything won't break the layout, but the left and right ones do.

    This method works in IE 6 and 7, as well as Firefox. It should work fine in Opera too.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com