css experts help - I'm having trouble dividing the page + floating div's stay inline

Discussion in 'CSS' started by omriL, May 10, 2012.

  1. #1
    Hi, having trouble with the following task for my web, I added the css code for task example.

    I have "main" div that contain two div's - "main_left", "main_right" - each will have dynamic content (thats why solutions with absolute-relative div's not good for me).
    my goals for the "main_left" div:
    1. width - floating left with permanent width - no problem!
    2.
    height - will have the height of the heightest between the two (itself or the "main_right" div) - because dynamic content in each.

    my goals for the "main_right" div:
    4. width - will be in all the rest of the page beside the "main_left" div (100% or auto not working)
    5. height - will have the height of the heightest between the two (itself or the "main_left" div) - because dynamic content in each.
    6. when I shrink the browser it will stay in the same line, and won't jump to the next one - tried couple of things but it didn't work ):

    7. why I can't "see" the "main" div? (with the yellow background)
    8. need all to work on IE aswell

    I'm sure I'm missing someting because it sould be simple I guess...
    Somebody???

    ------------------the code-----------------------
    <html><head>    <style>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    
    margin: 0;    
    padding: 0;   
    border: 0;    
    text-align: left;    
    vertical-align: baseline;
    }    
    #header {    
    position: relative;    
    width: 100%;    
    min-width: 1250px;    
    height: 100px;     
    margin: 0px;     
    padding: 0px;    
    background: blue;
    }
    #main_menu {    
    width: auto;    
    height: 34px;    
    min-width: 1250px;    
    margin: 0;    
    padding: 0;    
    background: green;
    }
    #main{    
    position: relative;    
    background: yellow;    
    width:auto;    
    height:auto;    
    border:none;    
    margin: 0;    
    padding: 0;
    }
    #main_left{    
    float:left;    
    position:relative;    
    width:178px;    
    margin: 0;    
    padding: 0;    
    background: red;
    }
    #main_right{    
    float:left;    
    position:relative;    
    width:auto;    
    height:auto;    
    margin: 0;    
    padding: 5px 0 0 30px;    
    background: brown;    
    border:none;
    }
    #footer {    
    clear:both;    
    position:relative;    
    width: 100%;    
    min-width: 1250px;    
    height: 240px;    
    margin: 0;    
    padding: 0;    
    background: 
    pink;
    }    
    </style>   
    </head>
    
    <body>
    <div id="header">
    <p>header</p>
    </div>
    <div id="main_menu">
    <p>main_menu</p>
    </div>
    <div id="main">    
    <div id="main_left">    
    <p>main_left</p>    &nbsp;<br>&nbsp;<br>&nbsp;<br>    </div>    
    <div id="main_right">    
    <p>main_right</p>    &nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>    </div>    
    </div>
    <div id="footer"><p>footer</p></div>
    
    </body>
    </html>
    PHP:
     
    omriL, May 10, 2012 IP