[thelist] css question...

Chris Price chris.price at choctaw.co.uk
Thu Nov 4 15:01:58 CST 2004


On 4/11/04 8:10 pm, "Travis" <travis at mediastill.com> wrote:

> Hi all,
> 
> I have a problem:  I want to nest a div within a div like so...
> 
> <div>
> 
> <div style="float:left; width:50%"></div>
> 
> </div>

My site is built is built in that way and I needed a hack to fix it
(Tantek's I think).

The other thing I needed to do was work out the combined width of all the
divs including paddings, margins and borders.

The following is a distillation of the solution. If you check my website you
will see it in action. I believe it works in most browsers.

Apart from border, I've used percentages throughout otherwise its impossible
to add them up.

Hope it helps.

<style>

#this { margin-left: 20%; }

div.that {
    float: left;
    margin: 0 1% 5px 0;
    padding: 1%;
    border: solid 1px #663;
    }
    
/*div.that {
    width: 28%;
    }*/
    
div.that {
    width: 28%;
    }
div.that {
    \width: 22%; 
    w\idth: 28%;
    }
    
</style>

<div id="this">

    <div class="that">
        <p></p>
    </div>
    
    <div class="that">
        <p></p>
    </div>
    
    <div class="that">
        <p></p>
    </div>

</div>

-- 
Chris Price

Choctaw Media Ltd

chris.price at choctaw.co.uk
http://choctaw.co.uk

Tel. 01524 825 245
Mob. 0777 451 4488


A man can do nothing better than to eat and drink and find satisfaction in
his work
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The information in the email (including any attachments) is confidential and
intended solely for the use of the individual to whom it is addressed.
Access to this email by anyone else is unauthorised. Any views or opinions
presented are solely those of the author and do not necessarily represent
those of Choctaw Media. If you have received this email in error be advised
that any use, dissemination, forwarding, printing or copying of this email
is strictly prohibited. Please notify the sender and please delete the
message from your system immediately.



More information about the thelist mailing list