HTML & CSS Background problemn

Saumyojit · Mar 23, 2021

<div id="rt"></div> this line i have written in index.html file

CSS:

#rt {
  background-color: red;
  width:70%;
  height: 300px;
}

this part i have written in .css file .
Output is showing the right : A red background color block is showing .

NOw if i use inline css here, there is no blue background coming .
But if i write some text in between div tag then the container with background blue is showing why so ?

HTML:

<div style="height:60%; width:50%; background:blue;">
</div>

Saumyojit · Mar 23, 2021

@Malcolm please help

BorkedSystem32 · Mar 23, 2021

@Saumyojit, it would be great if you could go back to edit your original post to be formatted into a code snippet - this helps make the code easier to read. You can find out how to use the BBCode feature here: https://codeforum.org/threads/how-to-post-your-code-into-threads.183/

Saumyojit said:
NOw if i use inline css here, there is no blue background coming .

Well, could you show what code you've tried? We might actually need either the full HTML or CSS file.

Saumyojit · Mar 23, 2021

i gave you the two main files . I hope you understood my doubt . When i am using inline style attribute inside div tag then why no background color is not showing until i write some text inside div tag

Saumyojit · Mar 23, 2021

[CODE lang="html" highlight="44,46"]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="This is an awesome website">
<meta name="author" content="Jit">
<meta name="keywords" content="HTML,Tutorial,Giraffe Academy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="150">
<title>My Website</title>
<br> <br>

<link rel="stylesheet" type="text/css" href="./style.css">

</head>

<body style="background-color:lightblue;">

<div style="height:60% width:40%; background:blue;"></div>
<br><br><br>
<div id="rt"></div>
</body>
</html>

[/CODE]

this is the code in css file

CSS:

#rt
{

  background-color: red;
  width:70%;
  height: 300px;

  }

BorkedSystem32 · Mar 23, 2021

Saumyojit said:
When i am using inline style attribute inside div tag then why no background color is not showing until i write some text inside div tag

(I was gonna post saying that it was probably just a HTML/CSS quirk, but I finally found the problem and a solution).

In your inline-CSS, you are using a percentage for both your width and height. Changing this to width: 40px; height: 60px; will render a tiny, blue box.

Moral of the story is this: if you are wanting to adjust containers to a certain size(and have them adjust based on the screen size and magnification), use a percentage; if you are wanting containers to be a specific size and remain that way(so they will not change size depending on the screen or magnification), use the px unit.

Saumyojit · Mar 23, 2021

Hassapiko said:
(I was gonna post saying that it was probably just a HTML/CSS quirk, but I finally found the problem and a solution).

In your inline-CSS, you are using a percentage for both your width and height. Changing this to width: 40px; height: 60px; will render a tiny, blue box.

Moral of the story is this: if you are wanting to adjust containers to a certain size(and have them adjust based on the screen size and magnification), use a percentage; if you are wanting containers to be a specific size and remain that way(so they will not change size depending on the screen or magnification), use the px unit.

<div style="width:500px; height:170px; background:blue"></div> this creates a blue box exactly what i wanted

<div style="width:100%; height=50%; background:blue"></div> this did not create anything
why so ?

BorkedSystem32 · Mar 23, 2021

Saumyojit said:
<div style="width:100%; height=50%; background:blue"></div> this did not create anything
why so ?

I don't exactly know. Guess it's just a weird quirk with HTML/CSS. I wouldn't be so concerned about it, as HTML/CSS are markup-languages and not programming-languages.

As I said, use the percentage if you want containers to adapt to the screen size; use
px if you want a fixed size that does not adapt.

kolakube · Mar 23, 2021

A div element's height is set by the content inside of it. In your example you have an empty div and are trying to set the height as a percentage, which is a relative measurement, and with no content inside the div you are essentially saying "make this height 40% of 0" which of course equals zero.

Saumyojit · Mar 24, 2021

Mangini said:
A div element's height is set by the content inside of it. In your example you have an empty div and are trying to set the height as a percentage, which is a relative measurement, and with no content inside the div you are essentially saying "make this height 40% of 0" which of course equals zero.

kolakube · Mar 24, 2021

Saumyojit said:
View attachment 807 View attachment 808

Must be some browser/OS differences, going back to the quirk @Hassapiko was referring to. Those same codes give me nothing in my own tests. A larger point to be made is setting a height on elements is not great practice anyway, but a useful beginner's exercise for understanding HTML and CSS.

BorkedSystem32 · Mar 24, 2021

Mangini said:
Must be some browser/OS differences, going back to the quirk @Hassapiko was referring to

It must definitely be this. The code used would display one way on a Chromium-based browser and then displayed differently on a Gecko-based browser. Web standards are never consistent and even something like background-color: blue can end up showcasing two different shades of blue.

@Saumyojit also said that he was having trouble displaying these boxes in an empty <div>. In the images given, these boxes are being displayed...in an empty <div>. @Saumyojit, may I encourage you to not use online-editors? Your browser(Chrome, in this case) has the ability to display HTML - both offline and online(it cannot render PHP without a server like Apache, however). Plus, it means you get to work in a proper development-environment, and will be able to spot actual errors(and not errors caused by something in the online editor).

Saumyojit · Mar 24, 2021

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
              height: 200px;
              width: 50%;
              background-color: powderblue;
            }
        </style>
    </head>
    <body>
        <h2>Set the height and width of an element</h2>
        <div>This div element has a height of 200px and a width of 50%.</div>
    </body>
</html>

Saumyojit · Mar 24, 2021

Mangini said:
you are essentially saying "make this height 40% of 0"

THE same thing is happening with my atom editor also

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height:50%;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>

when i change the height attribute to 50 % it should be 50 percent of the original 200pixel right i.e 100 pixel
But output is coming

Saumyojit · Mar 24, 2021

@Mangini please help

Saumyojit · Mar 25, 2021

@Hassapiko

LTomy · Mar 25, 2021

The <div> elements will have a height of 50% of the height of its parent (Here, the <body> element)., but you have not given any height to the <body>. Try giving an height and width of 100% to the <html> and <body> elements.

Saumyojit · Mar 25, 2021

LTomy said:
The <div> elements will have a height of 50% of the height of its parent (Here, the <body> element)., but you have not given any height to the <body>. Try giving an height and width of 100% to the <html> and <body> elements.

One of my seniors told that suppose the webpage height is 500px then the div element if its height is 50 percent then it should be taking 50 percent of the full web page height? is he right?

LTomy · Mar 25, 2021

I think it may depend on the browser used, but in my experience, by default, the height of the <body> is the height of its content. So if there is text inside it, its height will match the height of the text and if there is nothing inside it, it will have a height of 0.

Saumyojit · Mar 25, 2021

LTomy said:
The <div> elements will have a height of 50% of the height of its parent (Here, the <body> element)., but you have not given any height to the <body>. Try giving an height and width of 100% to the <html> and <body> elements.

u are right

div height by percentage doesn't works on Chrome 63

I found style is broken in my website without change on code when I use Chrome. Even though, when I confirmed with Firefox and Safari, it works well and I remember it also worked before I update Ch...

stackoverflow.com

Welcome!

HTML & CSS Background problemn

Well-Known Coder

Well-Known Coder

Silver Coder

Well-Known Coder

Well-Known Coder

Silver Coder

Well-Known Coder

Silver Coder

Active Coder

Well-Known Coder

Active Coder

Silver Coder

Well-Known Coder

Well-Known Coder

Well-Known Coder

Well-Known Coder

Gold Coder

Well-Known Coder

Gold Coder

Well-Known Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy