Html - unresponsive container flexbox not reaching height of 100 % and width of 50n %

Samuel
July 10, 2024
152 views
1 vote
2 Answers

I have problems not being able to make a container display a height of 100% and a width of 50% on tmy screen despite my CSS already mentioning those specified measurements in the appropriate div class. I want it to look like my design in the first image below but i got the second image below that as my result.
enter image description here

My result is the one below
enter image description here

This is my current HTML code

<!doctype html>
<html>
    <head>
     <link href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="ID-registration">
        <div class="application-image-2">
            <img id="passport-image" 
            src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/Passport-PNG-Free-Image.png"
            alt="Passport-PNG-Free-Image">
        </div>
        <div class="ID-application">
            <h2><h2 style="color: lightskyblue;">ID Confirmation</h2>
            <h3>Register to continue</h3>
        </div>
    </div>
    </body>
</html>

You can view my full HTML and CSS on my full work on codepen: my full codepen work

besides the problem with the container for my passport image, the container on the right with the div class= "ID-application won’t display the text with a left alignment and a center aligned justified content despite me having already mentioning it in my CSS. Please help me fix this error. Thank you

I tried moving the display: flex atribute from an in-line CSS to the external CSS in hopes of making the page more responsive and placed both div containrers under the same div class that uses the flex property to make them appear side by sif=de equally but it hasn’t worked.

Answers

Percentage values for width and height are calculated with respect to the containing block, that is, the element’s parent.

When we style a div with height: 100%, nothing appears to happen. That’s because this div’s parent is the body, which has no specified height. The body therefore it takes its height from its contents: it is only as big as it needs to be.

body {
  margin: 0;
  background: pink;
}

.d1 {
  color: white;
  background: brown;
  height: 100%;
}

<div class="d1">DIV</div>

Styling the body with height: 100% doesn’t appear to help either.

body {
  margin: 0;
  background: pink;
  height: 100%;
}

.d1 {
  color: white;
  background: brown;
  height: 100%;
}

<div class="d1">DIV</div>

That’s because the body has a parent too: the html element. The html element doesn’t have a parent, so the viewport is used as a surrogate parent for percentage size calculations. So when we style html with height: 100% (in addition to body and .d1, we get the result we want:

html, body, .d1 {
  height: 100%;
}

body {
  margin: 0;
  background: pink;
}

.d1 {
  color: white;
  background: brown;
}

<div class="d1">DIV</div>

However, that’s not the only issue with your code. I’d use a grid to implement a side-by-side layout such as this.

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

img {
  border: 2px solid white;
}

body>div:nth-child(1) {
  background: dodgerblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

body>div:nth-child(2) {
  background-image: url(https://picsum.photos/500/1000);
  background-size: cover;
  padding: 2em;
  text-align: center;
  gap: 1em;
  position: relative;
  z-index: -2;
}

/* coloured image overlay */
body>div:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: aliceblue;
  opacity: 0.94;
  z-index: -1;
}

button {
  color: white;
  background: dodgerblue;
  font-size: inherit;
  border: 0;
  border-radius: 5px;
  padding: 0.5em 1em;
}

<div>
  <img src="https://picsum.photos/200">
</div>
<div>
  <h2>ID Confirmation</h2>
  <h3>Register to continue</h3>
  <p><input type="text"></p>
  <p><input type="password"></p>
  <p><button>Login</button></p>
</div>

body{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.ID-registration{
    width: 100%;
    height:100vh;
    display: flex;
}
.application-image-2 {
    height:100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.application-image-2 img{
    width: auto;
    height: 50%;
}
.ID-application {
    height:100%;
    width: 50%;
    background-image: url(pngtree-abstract-gradient-white-gray-techno-design-of-connection-image_1374575.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

<!doctype html>
<html>
    <head>
     <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="ID-registration">
        <div class="application-image-2">
            <img id="passport-image" 
            src="360_F_236221233_fLMrTE8kg6uf01UkvmLMZlkFTQnDR9Mx.jpg"
            alt="Passport-PNG-Free-Image">
        </div>
        <div class="ID-application">
            <h2><h2 style="color: lightskyblue;">ID Confirmation</h2>
            <h3>Register to continue</h3>
        </div>
    </div>
    </body>
</html>

I suggest you to add bootstrap, will help you to reduce your css and can do alignments and layout more efficiently and easily

Please signup or login to give your own answer.

Click here to cancel reply.

Html – unresponsive container flexbox not reaching height of 100 % and width of 50n %

Answers