If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2014
    Member #

    Why won't the height of my div change?

    Hey everyone!

    I'm working on a personal website for school, and I've encountered a problem with changing the height of one of my <div> containers. I'll be attaching a screenshot of my site so you can see what I mean.

    As you'll notice, there is a grey area on the left side and a pink area on the right. The left side is contained in a <header> element, and the right side is contained in a <div> container with a class named "page". The left side stretches all the way to the bottom, but the pink one won't do the same, even though I've previously set the height of that particular div container to 100%.

    I've tried to copy-paste the exact selector and value from the header element to .page, but my efforts did not suffice. I've also tried replacing the header element with another <div>, but that didn't work either. Now I'm stuck, wondering what is it that I've done wrong?

    I'm not sure whether the issue lies in the body or the universal element in my CSS document. I'll upload the code I've done, just so you see what I mean.

    * {margin: 0; font-size: 16px; font-family: "Open Sans"; font-variant: 300;}
    body {
    	width: 100%;
    	height: 100%;
    	margin: 0 auto;
    	-webkit-font-smoothing: antialiased;
    	-moz-font-smoothing: antialiased;
    	-ms-font-smoothing: antialiased;
    	-o-font-smoothing: antialiased;
    	font-smoothing: antialiased;
    	-webkit-text-rendering: optimizeLegibility;
    	-moz-text-rendering: optimizeLegibility;
    	-ms-text-rendering: optimizeLegibility;
    	-o-text-rendering: optimizeLegibility;
    	text-rendering: optimizeLegibility;
    header {
    	background-color: gray;
    	width: 14.58%;
    	height: 100%;
    	margin: 0 auto;
    	float: left;
    	position: fixed;
    nav {
    	background: url(../images/logo-white_35.png) no-repeat center top;
    	/*background-color: yellow;*/
    	height: 17rem;
    	margin: 15rem auto;
    	padding: .75rem;
    	position: relative;
    nav #links {
    	/*background-color: orange;*/
    	margin-left: 1.5rem;
    	margin-top: 8rem;
    	position: relative;
    	list-style-type: none;
    nav #links a {
    	color: purple;
    	text-decoration: none;
    	-webkit-transition-property: color;
      	-moz-transition-property: color;
      	-ms-transition-property: color;
      	-o-transition-property: color;
      	transition-property: color;
      	-webkit-transition-duration: .2s;
      	-moz-transition-duration: .2s;
      	-ms-transition-duration: .2s;
      	-o-transition-duration: .2s;
      	transition-duration: .2s;
      	-webkit-transition-timing-function: linear;
      	-moz-transition-timing-function: linear;
      	-ms-transition-duration: linear;
      	-o-transition-timing-function: linear;
      	transition-timing-function: linear;
    nav #links a:hover {color: green;}
    nav #links #sublinks {
    	/*background-color: red;*/
    #copyright {/*margin: auto auto .5rem .5rem;*/}
    .page {
    	background-color: pink;
    	width: 85.42%;
    	height: 100%;
    	height: auto;
    	float: right;
    	margin: 0 auto;
    	position: relative;
    .content {
    	color: white;
    	background-color: black;
    	width: 45rem;
    	margin: 2.5rem auto;
    	padding: 2.5rem;
    I'll also be including an image of my website so far, just so that you will understand what I mean.


    Just so it's clear, the grey area is contained within a <header> and the pink area is contained within <div class="page">.

    I hope to get some enlightenment on this matter!


  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Member #
    47 times
    Maybe its better to use div instead of header.
    You can then change page structure in next way:
    <div class="container">
       <div class="row">
          <div class="header"></div>
          <div class="page"></div>
    .container {
    .row {
       display: table-row;
    .row div {
       display: table-cell;
    Maybe this example can help better:
    Edit fiddle - JSFiddle

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Tags for this Thread

All times are GMT -6. The time now is 09:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: