So I'm really trying to use divs exclusively, as opposed to using tables for layout purposes, but I'm still getting stuck here and there. Today I have one of those cases.

Consider the following markup:

   <div style="width:943px;margin:0px auto;height:auto">
        <div style="display:block;clear:both">
            <div style="float:left;display:block-inline;clear:none;background:url(tl.png);width:26px;height:25px"></div>
            <div style="float:left;display:block-inline;clear:none;background:url(t.png) repeat-x;width:865px;height:25px"></div>
            <div style="float:left;display:block-inline;clear:none;background:url(tr.png);width:26px;height:25px"></div>
        </div>
        <div style="height:auto;display:block;clear:both">
            <div style="float:left;width:26px;display:block-inline;clear:none;background:url(l.png) repeat-y;width:26px;height:100%"></div>
            <div style="padding:0 15px;height:100%;float:left;width:835px;display:block-inline;background:#FFF;clear:none;">
                <br />
                Some text heeere.
                <br />
                Some more text heeere.
            </div>
            <div style="float:left;width:26px;display:block-inline;clear:none;background:url(r.png) repeat-y;width:26px;height:100%"></div>
        </div>
        <div style="display:block;clear:both">
            <div style="float:left;display:block-inline;clear:none;background:url(bl.png);width:26px;height:25px"></div>
            <div style="float:left;display:block-inline;clear:none;background:url(b.png) repeat-x;width:865px;height:25px"></div>
            <div style="float:left;display:block-inline;clear:none;background:url(br.png);width:26px;height:25px"></div>
        </div>
    </div>

Now this is what's its doing:

alt text

Note that it's going slightly past the page height.

This is what I want it to do:

alt text

I want it to fluidly "fit" to the text without me specifying a height. It seems that the problem lies with the two side divs that won't work unless you specify the height as 100%. Is there maybe another/easier way to do this?

Thanks!

1 answer

BPartch 342
1
point

It is a little hard for me to tell what all you have going on in there with all the inline styles and no id/class names and such, but you should not need all of that to achieve what you are after:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

<div id="wrap">

 <div id="header"></div>

  <div id="main">
   <h1>This is the title of the article</h1>
   <p>This is some text to see what it looks like when it is viewed in a browser.</p>
  </div>

 <div id="footer"></div>

</div>

</body>
</html>

Then the .css file:

*{margin:0;padding:0;}

body{
  font:81.25%/1.4 Verdana,Arial,Tahoma,Sans-Serif;
  margin:30px 0;
  background:#92b2c6;
  color:#333;
}

#wrap{
 width:943px;
 margin:0 auto;
 background:transparent url(mid.jpg) top left repeat-y;
}

#header{
  height:25px;
  background:url(top.jpg) top left no-repeat;
}

#main{
  padding:0 20px;
}

#footer{
  height:25px;
  background:url(bottom.jpg) bottom left no-repeat;
}

Example

If you had 2 columns in there, I missed it. Though you can just add another div in there for the sidebar (between #main and #footer):

<div id="sidebar"></div>

Then float #main to the left and #sidebar to the right reducing the widths of each to your desired amount without exceeding the overall width of the wrap division. :)

Answered almost 7 years ago by BPartch