SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem centering inner div within container div

    Hello

    I am very new to laying out a page using CSS instead of HTML tables. I am trying to accomplish a basic affect but I am having difficulty getting it to work.

    What I am trying to accomplish is to have a container DIV. Then within the container DIV is a 2nd DIV (inner DIV) which I would like to be aligned at the bottom of the container DIV and centered horizontally.

    Here is what I have so far but I can not get the horizontal centering to work. Any thoughts why it is not centering?

    Thanks in advance for the assistance.

    Code:
    <html>
    <head>
    <style type="text/css">
    .container
    {
    	position: absolute;
    	top: 80px;
    	left: 210px;
    	height: 400px;
    	width: 600px;
    	border-color: red;
    	border-style: solid;
    	background-color: #ffffff;
    	padding: 20px 10px 20px 10px;
    	font-family:verdana,sans-serif;
    	font-size:18pt;
    	text-align: center;	
    	z-index: 2000;
    }
    
    .innerBottom
    {
    	position: absolute;
    	height: 50px;
    	width: 90%;
    	border-color: blue;
    	border-style: solid; 
    	bottom: 10px;
    	align: center;
    }
    </style>
    
    <script language="JavaScript">
    function buildDIVs()
    {
    	var body = document.getElementsByTagName( 'body' ).item(0);
    	
    	var containerDiv = document.createElement( 'div' );
    	containerDiv.id	= "containerDiv";
    	containerDiv.className = "container";
    	containerDiv.innerHTML = "Some text";
    	
    	var divBottom = document.createElement( 'div' );
    	divBottom.id = "innerBottomDiv";
    	divBottom.className = "innerBottom";
    		
    	containerDiv.appendChild( divBottom );
    		
    	body.appendChild( containerDiv );
    }
    </script>
    </head>
    <body>
    
    <a href="javascript: buildDIVs();">Build DIVs</a>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, there is no css property "align".

    When you position something absolutely, you take that element out of the normal document flow, and its positioning is determined by x and y co-ordinates (both should be specified) relative to a positioned parent. In your example, as the container div is a set width, the width of the inner div can be set in pixels, and the "left" property set to the width of the container minus the sum of the inner div width plus borders, divided by two.

    Depending on the content, absolute positioning may not be what you really want here. Does the container need to be fixed at 400px high? What is to happen if the content is too big for container (even by the user resizing text) and would normally be hidden behind the inner div? Is the container div supposed to be centred in the browser (it isn't at the moment) ? There are a number of ways this can be done, but it does depend on what content there will be, and what behaviour you want in relation to that content.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the response. Right now this will not be a page over the internet. My wife is a teacher and I am just working on a game similar to Jeopardy where she can display questions and answers to her 3rd grade students. With this being said, the container will always be the same height/width so I am just looking for a way to center the innerDIV horizontally at the bottom of the container div. Based on this information, what should the position be so that it is not based on the page, instead have it based on the container div? Would it be relative? I apologize for the align… I saw that while googling for help.

  4. #4
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    You might try giving us an image of what you want
    and ALL the code used for the page...it'll help a lot.

    It's very difficult to have content 'at the bottom' if nothing else is placed
    above it - you may just need to drop-in dummy content
    while you are developing your layout ;-)

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Smplest way is to set a "left" co-ordinate for the innerBottom div (always specify x and y co-ordinates when absolutely positioning anything) :
    Code:
    .innerBottom
    {
    	position: absolute;
    	height: 50px;
    	width: 90%;
    	border-color: blue;
    	border-style: solid; 
    	bottom: 10px;
    	left: 5%;
    }

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the feedback... that seemed to do the trick.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also don't forget to use a complete and proper DOCTYPE that matches the syntax that your (X)HTML code will be using, and always strive to ensure that both your HTML and CSS validate before diving for hacks.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the feedback. I added this doctype…

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Also, in an attempt to learn and not trying to sound sarcastic, what portion of the css code was a hack?

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just general advice, is all. (It's something I tell everyone.) By the way, don't forget to add type="text/javascript" to your script element. (You can also get rid of language="JavaScript" as well.)

  10. #10
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice. I actually know that I should be using type=”text/javascript” but it is habit of me to type language=”JavaScript” … or I just copy and paste old code.

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was guilty of that as well at one time. It's a hard habit to break, unfortunately. I know it was for me.


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
  •