Forums

snillor

Not sure what's going on. For a client redesign, my wrapper divs seem to NOT encompass the divs & other stuff inside. I want to apply a background color to these wrapper divs, but so far I'm stymied.

Markup and CSS both validated at W3C.

My outermost div (#wrap-all) and an inner div (#content-wrap) both seem to occupy only the small area of my heading, instead of expanding to surround their contents. ( I use bright background colors and borders to help me see where things are in the layout.)

I must be missing something very basic, and I suspect I'll feel real stupid when I learn what it is. Also, I apologize for the length of the markup and CSS - most of it doesn't apply to the problem but I figured I'd better show everything than guess what's necessary.

Here's the markup:

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carol Taylor Watercolors</title>
</head>
<body id="gallery-1">
<div id="wrap-all">
 <div id="heading">
 <h1>Carol Taylor Watercolors</h1>
 <ul class="nav">
  <li><a href="index.html">home</a></li>
	<li><a href="gallery-new.html">new work</a></li>
	<li class="not-link">galleries</li>
  <li><a href="biopage.html">about me</a></li>
  <li><a href="mailto:caroltaylor@earthlink.net">contact</a></li>
 </ul>
 </div> <!-- close #heading -->

 <div id="content-wrap">
  <div id="content">

  <div class="row-1">
   <dl>
    <dt><img src="images/gallery-1/Taylor03-Bottles_Peppers.jpg" alt="Peppers &amp; bottles" width="330" height="258" /></dt>
	  <dd class="first">Peppers &amp; Bottles</dd>
	  <dd>34 x 30 matted</dd>
	  <dd>watercolor</dd>
	  <dd class="status">SOLD</dd> 
   </dl>
   <dl>
    <dt><img src="images/gallery-1/Taylor06-JourneytoTop.jpg" alt="Journey to the Top" width="258" height="337" /></dt>
	  <dd class="first">Journey to the Top</dd>
	  <dd>34 x 30 matted</dd>
	  <dd>watercolor</dd>
	  <dd class="status">SOLD</dd> 
   </dl>
   <dl>
    <dt><img src="images/gallery-1/Taylor11-Cactus_Bouquet.jpg" alt="Cactus Bouquet" width="313" height="319" /></dt>
	  <dd class="first">Cactus Bouquet</dd>
	  <dd>34 x 30 matted</dd>
	  <dd>watercolor</dd>
          <dd class="status">SOLD</dd> 
   </dl>
  </div> <!-- close .row-1 -->
  <div class="row-2">
   <dl>
    <dt><img src="images/gallery-1/Taylor13-Tropical_Bouquet.jpg" alt="Tropical Bouquet" width="330" height="433" /></dt>
	  <dd class="first">Tropical Bouquet</dd>
	  <dd>36 x 28 matted</dd>
	  <dd>watercolor</dd>
	  <dd class="status">SOLD</dd>
   </dl>
   <dl>
    <dt><img src="images/gallery-1/Taylor19-Sunflower_Medlee.jpg" alt="Sunflower Medlee" width="330" height="429" /></dt>
	  <dd class="first">Sunflower Medlee</dd>
	  <dd>36 x 28 matted</dd>
	  <dd>watercolor</dd>
	  <dd class="status">SOLD</dd> 
   </dl>
   <dl class="row">
    <dt><img src="images/gallery-1/Taylor14-Sunflowers.jpg" alt="Sunflowers Out the Window" width="330" height="420" /></dt>
	  <dd class="first">Sunflowers Out the Window</dd>
	  <dd>36 x 28 matted</dd>
	  <dd>watercolor</dd>
	  <dd class="status">SOLD</dd> 
   </dl>
  </div> <!-- close .row-2 -->

  </div> <!-- close #content -->
 </div> <!-- close #content-wrap -->
</div> <!-- close #wrap-all -->

<div id="footer">
<p>&copy; 2008-2011 Carol Taylor</p>
</div> <!-- close #footer -->
</body>
</html>

Here's the CSS (omitting initial comments and my reset);

/* =layout */

body {
 text-align: center;
 background: #435cc9 url("../images-pres/body-BG.png") repeat-x;
 }
#wrap-all {
 min-width: 780px;
 max-width: 1100px;
 background: #fc0;
 text-align: left;
 margin: 0 auto;
 border: 2px solid #f00; 
 }
#heading {
/* background-color: #0f0; */
 }
#content-wrap {
 background-color: #333 !important; /* this isn't showing ! */
 border: 3px solid #0c3;
 }
#content {
 background-color: #f00; /** bright red - NOT SHOWING **/
/* margin: 20px auto; */
 border: 2px solid #fff;
 background-color: #333 !important;
 }
#content h1 {
 text-align: left;
 }
ul.nav {
 float: right;
 background: #333;
 }
ul.nav li {
 padding: 1em;
 font-size: 2em;
 }
.row-1 dl, .row-2 dl {
 display: inline;
 width: 350px;
 text-align: center;
 float: left;
/* padding: 10px 15px; */
 margin-bottom: 20px;
 }
div.row-1, div.row-2 {
 display: inline;
 clear: both;
 float: left;
 padding: 10px 15px;
 margin-bottom: 0px;
 }
div.row-1 {
 margin-top: 30px;
 }
dd {
 text-align: center;
 }
dd.first {
 margin-top: 10px;
 }
dd.status {
 padding-top: .9em;
 }
#footer {
 clear: both;
 background-color: #000 !important;
 padding: 20px 0;
 }
/* =typography */
body {
 font-size: 62.5%;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 }
p { 
 }
h1 {
 font-size: 3em;
 color: #fff;
 }
h1 span {
 font-family: "comic Sans MS";
 font-size: 2em;
 padding-top: 1em;
 }
h2 {
 font-size: 2.5em;
 }
h3 {
 font-size: 2.0em;
 }
h4 {
 font-size: 1.5em;
 }
dd {
 font-size: 1.5em;
 line-height: 1.3em;
 }
dd.status {
 color: #CCFFCC;
 font-weight: bold;
 font-style: italic;
 }
#footer {
 color: #f00;
 background-color: #ccc;
 }
/* =nav styling */
ul.nav li {
 display: inline; /* fixes IE/Win double-margin bug */
 }
ul.nav li.not-link {
 color: #f00;
 }
ul.nav li a:link {
 color: #fff;
 }

Thanks...

TheDoc

Looks like it's because you haven't cleared any of the floats. You'll need to clear the divs before the wrapper closes.

http://css-tricks.com/all-about-floats/

snillor

Thanks for the quick reply, TheDoc.

I couldn't get anything accomplished with clear.

But I did notice that if I add this:

padding-bottom: 100%;

to my

#content-wrap

it looks like it displays things the way I want.

TheDoc

Negatory! That will cause you some problems.

Do you have a link to the site?

snillor

No link at the moment - working locally.

snillor

OK, I've uploaded the rough site to:

very rough draft page

The garish colors are just to help me see the layout during development; hopefully the color palette I select for the real thing will be better.

snillor

I've retained the

padding: 100%;

on the

#content_wrap

Haven't seen any ill effects of it so far in my testing, but if this is a bad idea, I'll remove it once I have a better solution.

TheDoc

I have a feeling that it should cause ill effects, but I can't quite give you a specific scenario right now of that happening.

The 'classic' solution to solve the clearing of the floats would be to add this right before you close #content_wrap:
<div class="clear"></div>
Then in your CSS file add:
.clear { clear: both; }

noahgelman

remove padding:100% and add overflow:hidden to #content

TheDoc

Or do as noahgelman says! I'm still stuck in my clearing div ways!

snillor

TheDoc,

Thanks, your explanation of how/where to use clear did the job.

I've removed my odd padding entry. I trust your instincts on that: even though it seemed to work with no ills effects, it sure had the look and feel of an ill-advised hack.

snillor

Thanks noahgelman. Interesting how often there are multiple solutions to a problem.

NaomiPierce

Many thanks for this. You solved my dilemma too!

treehouse : what would you like to learn today?

Forums

[Solved] my "wrap-all" div doesn't wrap all