Arrgh! why wont' you work? (css positioning)

1

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 the net etc, then applying what i’ve read 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 :stuck_out_tongue: )


<!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>



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! :slight_smile: i’d really appreciate any help here…