Code Grasshopper Code Grasshopper - 4 months ago 8
HTML Question

Div overflowing on higher resolutions

I have been trying for awhile now to center a div and kept it from overflowing on higher resolutions(1920 x 1200 and up), I tried adding

width:auto
or using positioning but nothing is working so I was hoping that someone could point me in the right direction.

This is my div:

enter image description here

And this is what happens on higher resolutions:

enter image description here

This div is within another one so here it is both the css and html for both:

/*Parent*/
.main-graphic-container {
border-radius: 5px;
padding-right: 75px;
padding-left: 75px;
padding-bottom: 35px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #ebebeb;
}

/*Child*/
.feature-container {
height: 80px;
position: absolute;
z-index: 1;
margin-top:80px;
margin-left:45px;
padding-top: 10px;
border-style: solid;
border-width: 1px;
border-color: #888888;
background-color: #ffffff;

}

<div class="container main-graphic-container">
<div class="row">

...

</div>
<!-- end row -->

<!-- Child container so troublesome-->
<div class="container ">
<div class="row">
<div class="center-block">
<h1 class="greyText col-md-8 col-md-offset-2">LOREM IPSUM DOLOR SIT AMET. </h1>
<!-- Title -->

<!-- Info container -->
<div class="col-md-8 col-md-offset-1 feature-container">

<!-- Left -->
<div class="col-md-6">
<h4 class="bold blue-title text-center">Lorem ipsum</h4>
</div>

<!-- Right -->
<div class="col-md-6">
<h4 class="grey-title">Lorem ipsum</h4>
</div>

</div>

</div>
</div>
</div>


Any feedback would be greatly appreciated.

Answer

You need little improvement in your code. Try the below code for your issue.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<style type="text/css">
  /*Parent*/
.head{
  background-color: #eee;
  padding: 3rem;
  text-align: center;
}

.sub-contain{
  border:1px solid #000;
  padding: 2rem;
  background-color: #fff;
  top: -45;
  text-align: center;
}
</style>
<body>
<div class="container"> 

<div class="head">
<h1>LOREM IPSUM DOLOR SIT AMET.  </h1>
</div> <!--head-->

<div class="col-md-8 col-md-offset-2 sub-contain">
<div class="col-md-6">
<h4 class="bold blue-title text-center">Lorem ipsum</h4>
</div>

<div class="col-md-6">
<h4 class="grey-title">Lorem ipsum</h4>
</div>
</div>

</div><!--cont-->
</body>
</html>

Comments