width of the width and height not working

Question

hi i am just trying to change width and height of .content class. but its giving me like 100px of width and 100% of height even if i don't mention. i have tried removing float but stil not working.what is the 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 is 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: it only gives me like 100px wide div here .

The reason is that you have style for #container div and it's affecting the result. CSS priority is why defining it in .container class will be ignored — Rayee Roded
– Rayee Roded, Commented Sep 13, 2017 at 19:49

P.S. · Accepted Answer · 2017-09-13 19:49:30Z

As @RLaaa said: "The reason is that you have style for #container div and it's affecting the result".

If you want to keep all styles that you have already wrote, you just need to use !important in your case for .content such properties, for example (random values):

.content { background-color: yellow; width: 500px !important; height: 200px !important; }

You can change this to any values you like. Here is the snippet:

 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 { background-color:yellow; width: 500px !important; height: 200px !important; }

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

E. Zacarias · Accepted Answer · 2017-09-13 20:00:54Z

When you use the selector #container div it means every div element inside, including div inside div. You should use #container > div if you mean to apply it just to direct children.

Note you said you did not defined height:100%, but actually you do! Your problem is that your #container div selector applies also to #container div div.content element.

You can use !important or be more specific in your CSS selectors:

#container > div { ... } #container > div > .content { ... }

Collectives™ on Stack Overflow

width of the width and height not working

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related