#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0

    Help with positioning divs


    Hi!

    I am trying to make a page layout for a webpage with CSS and have a basic idea on how I want the divs to be positioned but I can't get it right. If I get the positioning right in IE then it wont work in Chrome and vice versa. I have no hair left on my head to pull out so I reach out my hand for help or comments here.

    I drew a scetch of how I want it to look, but couldnt upload it because of the forum rules.

    Basically I want all divs centered on the browser window starting with a header on top, three columns centered below the header and a footer at the bottom.

    I use fixed width for all divs. During my last attempts of getting this right I placed all divs within a container that was centered wich seems to work in IE but not in Chrome.

    Any tips on how to position the divs so that it works in most browsers?

    Thanks in advance!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0
    This is basically what the css that I started with looked like:

    Code:
    #container {
    	width: 1200px;
    }
    #header {
    	width: 1000px;
    	border: 2px solid #0000FF;
    }
    #lpad {
    	margin: 0 auto;
    	width: 50px;
    	float: left;
    }
    #article {
    	width: 700px;
    	padding: 20px 50px 20px 0px  float: left;
      float: left;
    }
    #aside {
    	width 200px;
    	float: left;
    }
    #footer {
    	width: 1000px;
    	height: 100px;
    }
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, Corvin.

    If it's not working in IE, then IE is probably using "quirks mode", which is usually bad. Add this to the very beginning of your HTML:
    Code:
    <!DOCTYPE html>
    The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    Yeah, there is a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.

    P.P.S. Out of curiosity, is that your real name or a DXHR reference?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0
    Hi and thanks for the tips and most of all the links to the validation sites! Only two minor errors in the css but no more then 36 in the index.php and included files...

    It looks like a friend of my who is coding functions for the page have unclosed divs in some of the included files. Ill try to track them down tomorrow and see if it works as it should. Im almost sure that I will return to this thread with another angle of the div positioning problems :-)

    Corvin is actually a old family name but it's not used by the family anymore. Haven't tried DXHR... yet... used to be a MMORPG junkie back from MUDS and Ultima Online but dont have as much time for it anymore.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0
    Ok so I cleaned up the code and now the divs are positioned correctly withing each other. Now the only problem is that they are all positioned to the left of the screen and I want them all centered in the middle of the browser window. Do I need to place them all in a container first and center that one or is there another way. And if I place them in a holding container, wich command should I use to center that one?

    The raw clean code for the divs looks like this now:
    CSS
    Code:
    /* CSS Document */
    #container {
    	width: 1200px;
    	position: fixed;
    	background: orange;
    	width: 1200px;
    	height: 100%;
    	padding: 10px;
    	border: 1px solid #FF00FF;
    }
    #header {
    	width: 1000px;
    	border: 1px solid #0000FF;
    }
    #lpad {
    	width: 23px;
    	float: left;
    	border: 1px solid #FFAAAA;
    }
    #article {
    	width: 750px;
    	float: left;
    	border: 1px solid #AACCCC;
    }
    #aside {
    	width: 230px;
    	float: left;
    	border: 1px solid #11AA33;
    }
    #footer {
    	width: 1000px;
    	border: 1px solid #CD7D00;
    	clear: both;
    }

    And the HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>        
      <head>            
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">            
        <meta name="generator" content="PSPad editor, www.pspad.com">           
        <link rel="stylesheet" type="text/css" href="style.css">           
        <title>         
        </title>        
      </head>        
      <body>         
      
          <!-- CONTAINER -->          
          <!--<div id="container"> -->          
          <!--</div> -->          
          <!-- HEADER -->             
          <div id="header">          HEADER     
          </div>       
          <!-- LEFT PADDING -->         
          <div id="lpad">    LPAD     
          </div>        
          <!-- MAIN CONTENT BOX -->         
          <div id="article">    ARTICLE     
          </div>    
          <!-- RIGHT SIDE BOX -->    
          <div id="aside">ASIDE     
          </div>    
          <!--- FOOTER BOX -->    
          <div id="footer">   FOOTER        
        </div>    
    </body>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0
    The container in the CSS is not used at the moment, I added that one for testing but couldnt get it to work.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    PSPad is great. In fact it's my primary editor, however, its default HTML templates are obsolete. Use the doctype I posted, not the practically useless one from the template. The main point of using a doctype is to tell browsers not to use "quirks mode". The doctype in that template does not do that.

    Technically you could give <body> a width and center it, but that didn't work in some very, very old browsers, so I prefer to use a wrapper <div> (or two). (Having multiple containers for large blocks of content can come in very handy.) The most common way to center block-level elements (that have a set width) is to set the left and right margins to "auto", e.g. "margin: 0 auto" (which also sets the top and bottom margins to 0).

    More info: Four ways to Center Elements with CSS

    By the way, giving "position:fixed" to "#container" doesn't make sense. What it effectively does is prevent everything in it from scrolling, unless you set the overflow property somewhere.
    Last edited by Kravvitz; August 16th, 2013 at 11:22 AM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0
    Thanks for the great help Kravvitz, the page is looking just as I want it now (in all browsers). The link tips have been great help to :-)

IMN logo majestic logo threadwatch logo seochat tools logo