CODEWITHSUNDEEP
htmlcss
Aan
Aan

Reputation: 12890

Controlling the position of <div> content

I have the following HTML page:

<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="Layer1" style="position:absolute;text-align:left;left:0px;right:0px;width:99.7938%;height:92px;z-index:0;">
</div>
<div id="Layer2" style="position:absolute;text-align:left;left:0px;top:291px;width:99.7938%;height:3.7%;z-index:1;">
</div>
</body>
</html>

and the following CSS:

body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#Layer1
{
   background-color: #003C00;
   background-image: none;
   border: 1px #CCCCCC solid;
}
#Layer2
{
   background-color: #003C00;
   background-image: none;
   border: 1px #CCCCCC solid;
}

My page now looks like as the below image, I want to add a new where the content of this new div appears in between the two layers (layer1 & layer2) where the arrow is shown, and it supposes to expand without overlaying layer2. I have tried to put my in between, but the content appears at the very top of the page.

enter image description here

Upvotes: 0

Views: 66

Answers (2)

Kelton_O
Kelton_O

Reputation: 158

You can try floating the elements in your project by using float:left or float:right in your css for the element. You should also remove the absolute position element from your css.

Upvotes: 0

Aziz
Aziz

Reputation: 7783

Get rid of position: absolute and avoid any inline styling. You already have a CSS file so add all the rules there for more clarity.

body {
  background-color: #FFF;
  color: #000;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.1875;
  margin: 0;
  padding: 0;
}

#Layer1,
#Layer2 {
  background-color: #003C00;
  border: 1px #CCCCCC solid;
  color: #FFF;
}

#Layer1 {
  height: 92px;
}

#Layer2 {
  height: 30px;
}

#content { padding:0 1em;}
<div id="Layer1" style="">header - layer 1</div>

<div id="content">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem vel, esse placeat possimus ipsam culpa dolor nihil dignissimos velit perferendis deserunt blanditiis necessitatibus rem maxime suscipit, magnam. Nobis, explicabo quas?</p>
  <p>Exercitationem ex, dolor, aperiam necessitatibus perferendis dignissimos quod. Incidunt facilis dolorum magni, tenetur repellat minima illum distinctio quas eos, veritatis esse facere minus obcaecati. Molestiae soluta fuga, obcaecati recusandae totam!</p>
  <p>Deserunt sapiente, neque nesciunt recusandae ratione dolore velit quam! Architecto itaque nihil suscipit reprehenderit aut veniam quia iste, mollitia, minima maiores ad tenetur quo dolor culpa est velit dignissimos alias.</p>
</div>

<div id="Layer2" style="">footer - layer 2</div>

jsFiddle: https://jsfiddle.net/azizn/du8q38tj/

  • Divs occupy 100% width of parent so there is no need to set their width (also why did you make 99.xxx?)

  • Use position: absolute only when you want to create overlapping content/layers

  • Percentage height only works when parent has a defined height. To make it work for elements who are direct descendants of body, you must add html, body { height: 100%; }

Upvotes: 1

Related Questions