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 Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    centered div layer(s)

    i understand that this question came maybe million times
    but i assure you all that i googled like idiot
    compared my code with others and i dont have luck at all...
    i started to learn about div layers because i wanted to throw away tabled layout...

    so my problem is:
    i have 3 DIV's, 1st is main that contain other 2
    2nd is on the left side with content
    3rd is on right side of 2nd
    ---
    i just want that those div layers all be centered on any resolution
    bigger than 1024x768

    i made pictures of what i want if i sound stupid :P

    - orange is main layer containing other 2
    - blue & green are other 2


    my wish:


    ---------------

    this is my humble code, i tried to put some logic in it but no luck...
    Code:
    <style type="text/css">
    body {
    	background-color: #CCCCCC;
    	margin-left: 0px;
    	margin-top: 0px;
    }
    
    
    .main_frame {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width:100%;
    }
    </style>
    Code:
    <div class="main_frame">
      <div style="position: absolute; top: 7px; left: 7px; width: 270px;">
           <p>some text/link</p>
           <p>another text/link</p>
           <p>yet another text/link</p>
      </div>
      <div style="position: absolute; top: 7px; left: 280px; width: 600px;">
           <p>some text/link</p>
           <p>another text/link</p>
           <p>yet another text/link</p>
      </div>
    </div>
    some site recommended to put in body: text-align: center;
    and for rest layers: text-align: left;
    this didnt work

    some site recommended to put layer(s) 50% from left
    but this would only "push" my content far on right and align still would
    not be centered...

    then i tried on stupid way:
    make table with 1 row, set its align to centered and put all div's inside
    but then i had trouble with positioning left and right layers where i wanted
    (since everything inside table is i guess under tabular rules and is placed in center of table...)

    any help would be apreciated
    Last edited by hog_mus_stream; 05-03-2009 at 11:33 PM. Reason: blah

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    no luck :/
    it still resizes toward left upper corner

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello hog_mus_tream,
    Putting margin:0 auto; on the body isn't going to do much for you.
    To center an element we need 3 things:
    1. a DocType
    2. an element with a width
    3. that elements left and right margins set to auto

    like I've done with your #main_frame here -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #ccc;
    	text-align: center;
    }
    * { /*this zeros out default margin and padding*/
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #main_frame {
    	width: 880px; /*this is the total width of left and right columns*/
    	margin: 0 auto; /*centers #main_frame*/
    }
    #left_col {
    	width: 270px;
    	float: left;
    }
    #right_col {
    	margin: 0 0 0 280px;
    }
    </style>
    </head>
    <body>
    	<div id="main_frame">
    		<div id="left_col">
    			<p>some text/link</p>
    			<p>another text/link</p>
    			<p>yet another text/link</p>
    		<!--end left_col--></div>
    			<div id="right_col">
    				<p>some text/link</p>
    				<p>another text/link</p>
    				<p>yet another text/link</p>
    			<!--end right_col--></div>
    	<!--end main_frame--></div>
    </body>
    </html>
    Notice I've also done away with your inline styles and absolute positioning.
    Now you can experiment with text-align:left; on your columns.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    hog_mus_stream (05-04-2009)

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    wow

    thank you so much, it works very nice !

    i must admit that it uses (div positioning) a bit weird logic
    too bad that w3c can't implement something more simple (like align: center; ) tag for divs :P

    thanks again
    Last edited by hog_mus_stream; 05-04-2009 at 08:28 AM. Reason: -

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #ccc;
    	text-align: center;
    }
    FYI, the above text-align:center is not required, if you are not concerned about the very old browsers like IE5 and previous versions.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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