473,395 Members | 1,383 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > how exactly does css positioning work?

Join Bytes to post your question to a community of 473,395 software developers and data experts.

How exactly does CSS positioning work?

AaronL
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
2 1670
AaronL
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
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

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

Similar topics

6
How *exactly* does Smart Navigation work?
by: anon | last post by:
How *EXACTLY* does Smart Navigation work? (I would really really really like for this Smart Navigation to work in Mozilla.) The inner workings and the code is what I am looking for. Does it...
.NET Framework
17
How, exactly, does kbhit( ) work?
by: hugo27 | last post by:
June 28, 2004 I'm interested in finding a way to test the keyboard buffer for MT/Not MT. Tried kbhit() in system.h but it didn't do what I thought it would from reading the literature. Samples:...
C / C++
11
Blocking Select() does not work
by: Michi Henning | last post by:
Hi, I'm using a blocking Select() call on a socket with a timeout value of -1. I'd expect the call to block indefinitely, but it doesn't. When I use Poll() instead, a timeout of -1 works fine...
C# / C Sharp
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!