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

Question

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.

The height is 100% of the parent container, which does not default to 100% height of the viewport. If you want 100% height of the viewport, you need to use 100vh. Also, you have a colon instead of a semicolon .application-image-2 {height:100% : — Tim R, Commented Jul 10 at 3:27

Brett Donald · Accepted Answer · 2024-07-10 05:09:48Z

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>

Nizal Sha · Accepted Answer · 2024-07-13 04:39:46Z

form {
    width: 300px; 
  }
  
  label {
    display: inline-block;
    width: 100px; 
    text-align: left;
    margin-right: 10px; 
  }

<form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <input type="submit" value="Submit">
      </form>

Nizal Sha · Accepted Answer · 2024-07-10 06:02:29Z

-1

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

answered Jul 10 at 6:02

Nizal Sha

1199 bronze badges

hi Nizahl I just implemented your code suggestions and it worked, the container is now half of the screen size. Can i ask you on how to left-aligned a label of a form?
– Samuel
Commented Jul 12 at 3:09
<form> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>, form { width: 300px; } label { display: inline-block; width: 100px; text-align: left; margin-right: 10px; }
– Nizal Sha
Commented Jul 13 at 4:40
try this form and css
– Nizal Sha
Commented Jul 13 at 4:41
Is there any chance you can share this code using codepen.io? I want to look at it clearly thank you
– Samuel
Commented Jul 15 at 3:40
codepen.io/nizalsha/pen/YzoyNgp
– Nizal Sha
Commented Jul 15 at 17:00

| Show 1 more comment

Collectives™ on Stack Overflow

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

3 Answers 3

Not the answer you're looking for? Browse other questions tagged
html
css
flexbox
text-alignment
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Not the answer you're looking for? Browse other questions tagged htmlcssflexboxtext-alignment or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
css
flexbox
text-alignment
or ask your own question.