CODEWITHSUNDEEP
htmlcss
S Nash
S Nash

Reputation: 2509

DIV does not stay inside other DIV

I have a ASP webform and this the HTML:

#header {
  width: 100%;
  height: 80px;
  border: solid black 5px;
  background-color: lightyellow;
}
#companylogo {
  float: left;
  width: 60px;
  height: 70px;
}
#titletext {
  float: left;
  font-size: 40px;
  margin-top: 20px;
  margin-left: 30px;
}
<div id="header">
  <img src="~/Images/aaa.jpg" alt="Logo Image" runat="server" id="companylogo" />
  <div id="titletext">MY Health Survey</div>
</div>

The issue is when I make the browser width small enough, the inner div falls UNDER the parent DIV(header ). As you see font size of inner DIV is large 40px;

I was expecting the inner DIV stays inside its parent.

Update: I'm now further confuses as when I run "Run code snippet" in this page , inner div text stays within it's parent.

Upvotes: 1

Views: 55

Answers (2)

alexwc_
alexwc_

Reputation: 1603

Two things:

  1. setting a strict height for #header will keep it at that height, min-height might be better in this case.
  2. using the clearfix "method" might help. Clearfix is a way for an element to automatically clear its child elements.

*please note: I'm using an image just to fill space - the width/height in the img is just for this image and you may not need it.

Here is a fiddle of it.

HTML:

<div id="header" class="clearfix">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Radiation_sign_round.svg/520px-Radiation_sign_round.svg.png" width="100" height="100" alt="Logo Image" runat="server" id="companylogo" />
<div id="titletext"> MY Health Survey</div>       
</div>

CSS:

#header {
  width: 100%;
  min-height: 80px;
  border: solid black 5px;
  background-color: lightyellow;
}

#companylogo {
  float: left;
  width: 60px;
  height: 70px;
}

#titletext {
  float: left;
  font-size: 40px;
  margin-top: 20px;
  margin-left: 30px;
  display: block;
}

.clearfix:after {
  content: " ";/* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Upvotes: 1

JD Davis
JD Davis

Reputation: 3720

This is due to you setting a maximum height, but using a percentage for the width. You can either use media queries to correct for this, or set a minimum width to prevent this.

Here is an example modification to your #header selector

#header {
  width: 100%;
  height: 80px;
  border: solid black 5px;
  background-color: lightyellow;
  min-width:500px;
}

And here's an example that enlarges your header when it is below a certain width using media queries

@media screen and (min-width: 500px) {
  #header {
    width: 100%;
    height: 80px;
    border: solid black 5px;
    background-color: lightyellow;
    min-width:500px;
  }
}

@media screen and (max-width: 499px) {
  #header {
    width: 100%;
    height: 200px;
    border: solid black 5px;
    background-color: lightyellow;
    min-width:500px;
  }
}

Upvotes: 1

Related Questions