CODEWITHSUNDEEP
htmlcss
NickG
NickG

Reputation: 138

Why do these div's disappear?

I'm trying to create a site with the content in between two div columns labeled lwall and rwall , but I can't get my two side div's to show up. Why are they disappearing and how can I prevent this in the future?

<!DOCTYPE html>
<html>
<head>
<style>
  body{
    margin:auto;
    background-color: maroon;
  }
  .head{
    margin:auto;
    text-align:center;
    color:#00a2e8;
    background-color:maroon;
    width:750px;
  }
  .nav{
    background-color:maroon;
    width:750px;
    margin:auto;
    text-align:left;
  }
  .nav ul{
    margin:auto;
    padding:0px;
    text-align:center;
  }
  .nav li{
    display:inline;
    list-style-type:none;
    padding:20px;
  }
  .nav a{
    display:inline;
    background-color:maroon;
    color:white;
    text-decoration:none;
  }
  .nav a:hover{
    display:inline;
    color:#00a2e8;
    text-decoration:none;
  }
  .content{
    background-color:white;
    margin:auto;
    width:750px;
  }
  .content img{
    width:200px;
    height:250px;
  }

  .content ul{
    text-align:center;
    padding:20px;
  }
  .content ul li{
    display:table-cell;
    list-style:none;
  }
  .content ul li p{
    padding:10px;
  }
  .lwall{
    float:right;
    background-color:blue;
    height:50px;
    width:50px;
    background-repeat: repeat;
  }
  .rwall{
    float:left;
    background-color:blue;
    height:50px;
    width:50px;
    background-repeat: repeat;
  }
  .foot{}
</style>
</head>
<body>
<div class="head">
  <h1>Sea Aggie Brothers & Sisters</h1>
</div>
<div class="nav">
      <hr>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="news.html">Services</a></li>
        <li><a href="contacts.html">Downloads</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="calendar.html">Calendar</a></li>
      </ul>
      <hr>
</div>  
<div class="lWall">

</div>
<div class="rWall">

</div>
      <div class="content">

          <ul>
            <li><div class="tbox">
              <img src="Calendar.jpg" >
              <h2>Calendar</h2>
              <p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
          </div></li>
            <li><div class="tbox">
            <img src="Calendar.jpg" >
              <h2>Resources</h2>
              <p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
          </div></li>
            <li><div class="tbox">
            <img src="Contact.jpg" >
              <h2>Newsfeed</h2>
              <p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
          </div></li>
          </ul>

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

Upvotes: 0

Views: 64

Answers (2)

David Trinh
David Trinh

Reputation: 329

You just need to fix two things in your css, .lWall (insertspace) then {...} and for .rWall (insert space){..}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Simple. CSS declaration name is wrong. It should be .lWall and .rWall not .lwall and rwall. HTML tags are Case insensitive. But Custom CSS names are Case sensitive.

 .lWall{
float:right;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.rWall{
float:left;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}

Or Change your HTML code like below.

 <div class="lwall">

 </div>
 <div class="rwall">

 </div>

DEMO

Upvotes: 3

Related Questions