Hello, Sometimes the width of a text paragraph (p tag) is not 100% of the width of its parent div. Why is that so? When a p tag has background-color:#FFFFFF, the width is 100%, but if there is background-color:transparent or no background-color, the width is not 100%. Help me, please. <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Language" content="fi" /> </head> <body style="background-color:blue"> <div style="width:600px; margin-left:auto; margin-right:auto; background-color: #FFFFFF;"> <p>This width is not 100% - This width is not 100% - This width is not 100% - This width is not 100%</p> <p style="background-color:transparent">This width is not 100% - This width is not 100% - This width is not 100% - This width is not 100%</p> <p style="background-color:#FFFFFF">This width is 100% - This width is 100% - This width is 100% - This width is 100%</p> </div> </body> </html>
Don't forget to add <!DOCTYPE html> to your page(s). Why are you using style tags? Make classes, put them into a .css page and update your html page. Try this, see if it works: .css (save it as a style.css file) body { font-family: Arial, sans-serif; background-color:blue; } . container { width:600px; margin-left:auto; margin-right:auto; background-color: #FFFFFF; } p.new { width: 100%; background-color: #FFFFFF; } Code (markup): Your new html: <!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Language" content="fi" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <p class="new">Some text goes here...</p> </div> </body> </html> Code (markup): You can change that p.new in your .css to whatever you want.
Yes, that works, but unfortunately it does not make any difference. In other words, when there is... p.new { width: 100%; } ...it does not work on AppleWebKit/537.36. The width of the text is not 100%. Any ideas?
Now I see your problem. You have a div 600px. So every <p> you add into that div can be max 600px. You can not use 100% on width. Try using px ex. 850px.
Thats a general rule. So it will be the same everywhere. If you add <div> with 600px it will be 600px.
I believe I have tried that way. My problem might have something to do with zoom level. It happens on AppleWebKit/537.36.
I am not sure why it's not working but upon reading online it appears to be some kind of a bug. Did you try adding: display: block; or display: table;