Divs Not Aligning

HTML & CSS
1

Hi,

I’m trying to create a basic panel like container with a title bar. Inside the title bar there should be a title floated to the left side and a few buttons floated to the right side. I’m having a problem trying to get my divs aligned correctly.

Here is the code:


CSS:

.panel {
border: 1px solid #A2C9E7;
min-width:300px;
min-height:200px;
background-color:#F7FBFE;
}

.panel_header {
background-image:url('../images/bg_tabbar.png');
background-repeat: repeat-x;
border-bottom: 1px solid #A2C9E7;
min-height:36px;
}
.panel_title {
font-size:16px;
font-weight:bold;
color:#186AAC;
padding:10px 0 0 5px;
}
.panel_options {
float:right;
padding:5px;
}

.panel_button {
width: 60px;
height:20px;
background-image:url('../images/bg_button.png');
background-repeat: repeat-x;
border:1px solid #ACD4F3;
}

I have this HTML structure

<div class="panel">
 
<div class="panel_header">
 
   <!-- Panel Title -->
   <div class="panel_title">
      <h1>Panel Title</h1>
   </div>
 
   <!-- Panel Options Area -->
   <div class="panel_options">
     <div class="panel_button">
       <h1 class="panel_button_text">View All</h1>
     </div>
   </div>
 
</div>
 
</div>

Any help appreciated.

Thanks,

Westside415

2

I’m having a problem trying to get my divs aligned correctly.
Hi,
It looks like your .panel_header was not enclosing the floated .panel_options div. Setting overflow:hidden; on .panel_header will force it to enclose it’s child floats.

Not only that but your h1 is a block level and it fills the full available width, when the right float comes after that h1 in the markup it sits below the h1.

(Note: I’m talking about the h1 title above, not your button h1. Just to make things a little clearer, that button should not be an h1 either.

Now if you float your h1 title to the left and your button to the right I think it will do what you want. It looks like you can eliminate some of those divs too, see if this code below works for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
.panel {
    min-width:300px;
    min-height:200px;
    background:#F7FBFE;
    border: 1px solid #A2C9E7;
}
* html .panel {height:200px}/*IE6 min-height*/

.panel_header {
    min-height:36px;
    background: url('../images/bg_tabbar.png') repeat-x;
    border-bottom: 1px solid #A2C9E7;
    overflow:hidden;/*contain floats*/
    width:100%; /*IE6 haslayout = contain floats*/
}
.panel_header h1 {
    float:left;
    margin:0;
    padding:10px 5px 5px;
    font-size:16px;
    color:#186AAC;
    background:#CDF;
}
.panel_button {
    float:right;
    margin:5px;
    width: 60px;
    height:20px;
    background:#FFF url('../images/bg_button.png') repeat-x;
    border:1px solid #ACD4F3;
}

</style>

</head>
<body>

<div class="panel">
    <div class="panel_header">       
       <h1>Panel Title</h1>        
       <div class="panel_button">View All</div>    
    </div>
</div>

</body>
</html>