SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    arrgh! why wont you work?? css positioning...

    i've made a site before, but im trying to improve it by going back to basics. im done with reading up on writing semantic XHTML, so im moving on to CSS -- again.

    what i'm doing at the moment is learning to implement the different schemes of positioning because i want the order in my markup to be: content, secondary menu, header, then footer. but in the browser window, of course i want header on the top, secondary menu and content below the header with secondary menu beside the content on the left, footer at the bottom.

    but try as i might, after reading up, searching sitepoint, the net etc, then applying to my code, i just cant seem to get it right. even the basic stuff like float: left, isnt working. i didn't have this problem with my other website. why now?

    anyway heres the code (all the colors, borders, padding etc are there just so i can see where things go wrong if they do and if everything is positioning as i want it. im relearning all of this, please dont laugh )

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
    
    <head>
    <title>Townhouses for sale in Pampanga, Philippines! - Tagle Homes</title>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <link rel="stylesheet" type="text/css" href="try.css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="wrapper2">
    	<div id="body">
    		<div id="mainContent">
    			<h1>Heading 1</h1>
    			<p>content content content content content content content content content content content content content content content content content content content content content content </p>
    			<p>content content content content content content content content content content content content content content content content content content content content content content </p>
    			<p>content content content content content content content content content content content content content content content content content content content content content content </p>
    		</div>
    		<div id="sidebar">
    			<ul>
    				<li><a href=#>Link</a></li>		
    				<li><a href=#>Link</a></li>		
    				<li><a href=#>Link</a></li>		
    				<li><a href=#>Link</a></li>		
    			</ul>
    		</div>	
    	</div>
    	<div id="header">
    			<ul>
    				<li><a href=#>Link</a></li>		
    				<li><a href=#>Link</a></li>		
    				<li><a href=#>Link</a></li>		
    				<li><a href=#>Link</a></li>		
    			</ul>
    	</div>
    	<div id="footer">
    			<p>content content content content content content content content content content content content content content content content content content content content content content </p> 
    	</div>
    </div>
    </div>
    </body>
    </html>
    Code:
    body {
    	margin: 0 auto;
    	width: 790px;
    	}
    
    #wrapper{
    	width: 790px;
    	margin: 0;
    	padding: 0;
    	background-color: black;
    	}
    	
    	#wrapper2 {
    		margin: 15px;
    		padding: 0;
    		background-color: red;
    		}
    	
    		#header {
    			border: 5px double pink;
    			margin: 0;
    			padding: 5px;
    			background-color: yellow;
    			}
    		#body {
    			margin:0;
    			padding:0;
    			background-color: yellow;
    			border: 5px double pink;
    			}
    
    			#sidebar {
    				width: 150px;
    				height: auto;
    				border: 2px solid yellow;
    				margin: 0px 10px 0px 0px;
    				padding: 4px;
    				background-color: green;
    				}
    	
    			#mainContent {
    				margin: 0;
    				padding: 4px;
    				border: 2px solid yellow;
    				background-color: green;
    				}
    			
    		#footer {
    			border: 5px double pink;
    			margin: 0;
    			padding: 10px;
    			background-color: yellow;
    			}
    
    
    /*=========
       Footer 
    ===========*/
    
    /* Text 
    --------*/
    #footer p {
    	font-size: .7em;
    	background-color:inherit;
    	font-weight:bold;
    	text-align:center;
    	}
    how do i use css to position the divs like this?

    thank you in advance for any responses
    Last edited by belledumonde; Aug 3, 2006 at 02:26.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the width and float from #mainContent and change the margins to this: margin: 2px 0 0 150px;

  3. #3
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks to the replies above, i appreciate them!

    but now im trying to position the elements of the page as stated in the first post. hoping i could find some help on this...


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
  •