By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,474 Members | 1,267 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,474 IT Pros & Developers. It's quick & easy.

How exactly does CSS positioning work?

AaronL
P: 99
Hello everyone,

I'm new at CSS and basically I want to create elements within elements with the proper positioning, this page I'm working on looks the way I want it to, but I think the CSS is wrong. For instance the text "This is content" is centered and I want that to be aligned to the left and only certain things centered. Next thing is I want to have the page start with a defined height, however as the content grows, I would like the left right and middle columns to all grow at the same time with the content, can you do that in CSS? Here is the URL: http://www.ecommphppro.com/rukusradio

Here is the CSS:
Expand|Select|Wrap|Line Numbers
  1. body {
  2.   position:relative; 
  3.   background-color:#000000; 
  4.   margin-top:0px; 
  5.   margin-left:0px;
  6. }
  7.  
  8. #container {
  9.   position:relative; 
  10.   width:1024px; 
  11.   margin-left:auto; 
  12.   margin-right:auto; 
  13.   margin-top:0px;
  14. }
  15.  
  16. #header {
  17.   position:relative; 
  18.   width:1024px; 
  19.   height:180px; 
  20.   background:#000000; 
  21.   background-image:url('images/headerbkg.jpg'); 
  22.   background-repeat:no-repeat; 
  23.   background-position:top left;
  24. }
  25.  
  26. #rukus3dlogo {
  27.   position:relative; 
  28.   z-index:9999; 
  29.   left:0px; 
  30.   top:0px;
  31. }
  32.  
  33. #rukuslogo {
  34.   position:relative;
  35.   z-index:9999; 
  36.   left:700px; 
  37.   height:180px; 
  38.   top:-225px; 
  39.   background-color:#000000;
  40. }
  41.  
  42. #leftcolumn {
  43.   float:left; 
  44.   width:271px; 
  45.   height:1280px; 
  46.   background-color:#000000; 
  47.   background-image:url('images/sidebkg.jpg'); 
  48.   background-repeat:repeat-x;
  49. }
  50.  
  51. #middlecolumn {
  52.   position:relative;
  53.   text-align:left;
  54.   z-index:1; 
  55.   background-color:#ffffff; 
  56.   left:190px; 
  57.   width:650px; 
  58.   height:1280px;
  59. }
  60.  
  61. #rightcolumn {
  62.   z-index:0; 
  63.   position:relative; 
  64.   float:right;
  65.   top:-1280px; 
  66.   width:271px; 
  67.   height:1280px; 
  68.   background-color:#000000; 
  69.   background-image:url('images/sidebkg.jpg'); 
  70.   background-repeat:repeat-x; 
  71. }
  72.  
  73. #menubar {
  74.   z-index:2; 
  75.   width:1024px; 
  76.   height:50px; 
  77.   background-image:url('images/mnubarbkg.jpg'); 
  78.   background-repeat:repeat-x; 
  79.   box-shadow:5px; 5px; 5px; #000000;
  80. }
  81.  
Here is the HTML code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.   <link rel="stylesheet" type="text/css" href="style.css" />
  6.   <title></title>
  7.   </head>
  8.   <body>
  9.     <div id="container">
  10.       <div id="header">
  11.  
  12.         <div id="rukus3dlogo">
  13.           <img src="images/rukus3dlogo.png">
  14.         </div>
  15.  
  16.         <div id="rukuslogo">
  17.           <img src="images/rukuslogo.jpg">
  18.         </div>
  19.  
  20.       </div>
  21.  
  22.       <div id="menubar">
  23.       </div>
  24.  
  25.       <div id="leftcolumn">
  26.       </div>
  27.  
  28.       <div id="middlecolumn">
  29.         This is content
  30.       </div>
  31.  
  32.       <div id="rightcolumn">
  33.       </div>    
  34.  
  35.     </div>
  36.   </body>
  37.  
I don't know if I'm over thinking things but it appears that I really don't understand positioning
Mar 27 '12 #1
Share this Question
Share on Google+
2 Replies


AaronL
P: 99
I also tried to put an image in the middle column and it stuck it all the way at the bottom of the page
Mar 27 '12 #2

AaronL
P: 99
Well I stole a layout to get it to work but I still don't really understand, I had to set the position to absolute on the click to listen button on that page and it moves around when you minimize the browser window and I don't want that :(
Mar 28 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.