CSS divs not lining up in height

Question

I have a very simple test site that I am using to practice some of my CSS skills. I cannot get the two main divs to match the height of the wrapper. I have a color coded example at the bottom of this post.

I had read somewhere that if I use the overflow property in my css file, that should take care of the problem. I tried both overflow: hidden and overflow: auto. Overflow: hidden did get the wrapper to be the right length, but the sidebar still wasn't long enough.

I'm sure this is something that is very simple and I know there are many tutorials out there on this issue but I cannot seem to understand what they are doing.

Here is my css file:

#wrapper {
background-color: green;
height: auto;
width: 1024px;
}

#head {
background-color:blue;
width: 100%;
height: 100px;
}
#sidebar {
background-color:red;
float: left;
width: 50px;
height: 100%;
}
#menu {
background-color:yellow;
float: right;
width: 974px;
height: 50px;
}
#content {
background-color:orange;
float: right;
width: 974px;
height: 100%;
}

I have three php files that come together to make the index page.

header.php

<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

footer.php

</body>
</html>

index.php

<?php  
  $pageTitle = "Home";
  require_once('includes/header.php'); 
?>
<div id='wrapper'>
wrapper
<div id='head'>
head
</div>
<div id='sidebar'>
sidebar
</div>
<div id='menu'>
menu
</div>
<div id='content'>
content
</div>
</div>
<?php require_once('includes/footer.php'); ?>

`height:100%` does not do what you think it does. It would seem simple enough, but it does not work like you would expect: http://stackoverflow.com/questions/6534156/css-height-100-issue — random_user_name, Apr 24 '14 at 18:13
Do not link you your web site. Please read: http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it — Diodeus - James MacFarlane, Apr 24 '14 at 18:14
what do you want exactly be specific what does it mean two main divs? — Nickool, Apr 24 '14 at 18:22
Sorry, I meant the #content and #sidebar divs. The #content div is just fine as it is but I want the sidebar div to extent to meet the length of the content div. — user2363217, Apr 24 '14 at 18:26

score 2 · Accepted Answer · answered Apr 24 '14 at 18:29

2

Add the following to your #wrapper...

position: relative;
overflow: hidden;

And the following to your #sidebar...

position: absolute;

For example of how it all works out, see: http://jsfiddle.net/AeLJQ/

answered Apr 24 '14 at 18:29

gfish3000

1,557
1
11
22

@user2363217, my pleasure, that was the goal! ;) – gfish3000 Apr 24 '14 at 18:35

CSS divs not lining up in height

1 Answers1