1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

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

0
  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