Home/ Questions/Q 611715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:48:52+00:00

So I’m really trying to use divs exclusively, as opposed to using tables for

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You asked for it, so here goes. This is my hand crafted, cross-browser, standards-compliant method of doing image borders on flexible containers.

    I’ve assumed an image border size of 16px here, you will need to adjust this to suit. Also, for clarity in the absense of images I have added borders. Thse should be removed, obviously.

    Demo. 

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Borders</title>
<style>
.outer {
    position:relative;
    float: left;
    border: 1px solid blue
}
.inner {
    border: 1px solid green
}
.tl, .tm, .tr, .ml, .mr, .bl, .bm, .br {
    border: 1px solid red;
    margin: 0;
    padding: 0;
}
.tm, .bm, .tl, .tr, .bl, .br {
    height: 16px
}
.tl, .tr, .bl, .br {
    width: 16px
}
.tm, .bm {
    height: 16px;
    margin: 0 0px
}
.tm {
    background-repeat:repeat-x;
    margin: 0 16px
}
.bm {
    background-repeat:repeat-x;
    margin: 0 16px
}
.tl {
    position: absolute;
    top: 0;
    left: 0;
}
.tr {
    position: absolute;
    top: 0;
    right: 0;
}
.bl {
    position: absolute;
    left: 0;
}
.br {
    position: absolute;
    right: 0;
}
.ml {
    padding-left: 16px;
    background-repeat:repeat-y
}
.mr {
    padding-right: 16px;
    background-repeat:repeat-y;
    background-position: 100% 0
}
</style>
</head>
<body>
<div class="outer">
    <div class="tm">
        <div class="tl"></div>
        <div class="tr"></div>
    </div>
    <div class="ml">
        <div class="mr">
            <div class="inner">
                <h2>Lorem</h2>
                <p>Ipsum dolor</p>
            </div>
        </div>
    </div>
    <div class="bm" >
        <div class="bl"></div>
        <div class="br"></div>
    </div>
</div>
</body>
</html>
    • 0