html - width of the width and height not working -
hi trying change width , height of .content class. giving me 100px of width , 100% of height if don't mention. have tried removing float stil not working.what reason?
<!doctype html> <html> <head> <style> body{margin:0} #navbar{ width:100%; background-color:black; height:50px; padding: 0 150px 0 150px; position:relitive; } #logo{height:60px; width:90px; } #container{ background-color:#e6e6e6; width:78%; margin: auto; height:1000px; text-align:center; } #navtable{ color:white; position:absolute; top:10px; left:300px; font-size:1.5em; } #navtable td{padding:0 10px 0 10px; border-right:1px solid white; } #container div{width:32%; height:100%; border:1px solid black; float:left; } .content{ /*this not working[enter background-color:yellow; } </style> </head> <body> <div id='navbar'> <img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/> <table id='navtable'> <tr> <td>home</td> <td>news</td> <td>money</td> <td>entertainment</td> <td>travel</td> </tr> </table> </div> <div id='container'> <div id='leftdiv'> <div class='content'>hhhh</div> <!--this--> </div> <div id='middlediv'></div> <div id='rightdiv'></div> </div> </body> </html> output: gives me 100px wide div here .
when use selector #container div means every div element inside, including div inside div. should use #container > div if mean apply direct children.
note said did not defined height:100%, do! problem #container div selector applies #container div div.content element.
you can use !important or more specific in css selectors:
#container > div { ... } #container > div > .content { ... } 
Comments
Post a Comment