CODEWITHSUNDEEP
htmlcssnestedheight
Samuel Scheeres
Samuel Scheeres

Reputation: 1

Problems with CSS "Auto" Height Attribute and Nested Divs

I have a problem with the "auto" attribute in my CSS. When I set the height to "auto," my #container div ignores the fact that my #info divs are nested inside of it, and only covers the navbar and image. This mean that my #info divs are set against a black background, even though the HTML clearly places them within the #container div. I'm not sure where the problem is, so here is my code (the XXXXXXX's are for privacy reasons):

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="gen_stylesheet.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#container {
    height:auto;
}

#info {
    display:inline;
    width:50%;
}

#info ul {
    list-style-type:none;   
}

img {
    padding:0;
}
</style>
</head>

<body>
  <div id="container">
    <nav>
      <ul>
        <li><a href="#" id="page_on">Home</a></li>
        <li><a href="research.html">Research Topics</a></li>
        <li><a href="pubs.html">Publications</a></li>
        <li><a href="people.html">People</a></li>
      </ul>
    </nav>
    <header>
      <h1>Celestial and Spaceflight Mechanics Laboratory</h1>
    </header>

    <img src="assets/home_img.png" alt=""/>

    <div id="info" class="left">
      <ul>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li><br/></li>
        <li><a href="http://ccar.colorado.edu/scheeres/Scheeres/Home_files/vita_scheeres.pdf">Professional Information</a></li>
        <li><br/></li>
        <li><a href="http://www.colorado.edu/aerospace/scheeres_dan.html">Official CU Website</a></li>
      </ul>
    </div>

    <div id="info" class="right">
      <ul>
        <li>Address:</li>
          <ul>
            <li>XXXXXXX</li>
            <li>XXXXXXX</li>
            <li>XXXXXXX,/li>
          </ul>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
        <li>XXXXXXX</li>
      </ul>
    </div>

  </div>
</body>
</html>

CSS

/**********General**********/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}

body {
background-image:url('assets/starry_night.jpg');
color:#000;
/*look for better font*/
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
text-align:center;
}

#container {
background-color:#FFF;
opacity:0.85;
}

#container, nav, #container header {
width:800px;
}

#container {
margin:5px auto;
}

/**********Navbar Styling**********/

nav {
height:auto;
margin:0;
padding:0;
}

nav ul {
list-style-type:none;
margin:0;
padding:0;
}

nav li {
display:inline;
}

nav a {
text-decoration:none;
padding:0 24px;
color:#000;
opacity:0.5;
}

nav a#page_on {
opacity:1;
}

/*****Hovering*****/

nav a {
transition:all;
}

nav a:hover {
opacity:1;
}

/**********Title Styling**********/

header {
margin:0;
padding:20px 0;
}

h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0;
}

/**********"#info" Div(s) + Image Styling**********/

#info {
margin:0;
padding:0;
height:auto;
float:left;
}

#info ul {
text-align:left;
}

img {
margin:0;
}

/**********Miscellaneous**********/

strong {
font-weight:bold;
}

i {
font-style:italic;
}

.hidden {
display:none;   
}

Upvotes: 0

Views: 256

Answers (1)

Xtian
Xtian

Reputation: 498

Try using Sibling Selectors. It's easier to inherit the child tags within it if you use that.

Upvotes: 1

Related Questions