HTML inline styles for 3 column tabless

KUB365

To speed up developing i am using a lot of inline code vs stylesheets.

Mainly using the style= attribute in divs, spans, and p.

Is this the best way to do 3 column inline? or is there an easier way. I nested the divs.

Expand|Select|Wrap|Line Numbers

 
<!-- container -->

<div style="width: 800px; border: 1px solid #ccc;">

    <div style="background-color:#009999; float: left; width:550px;">

        column 1

    </div>

    <div style="background-color: #CCCCCC; width: 250px; float: right;">

        <div style="float: left; width: 100px;">

        column 2

        </div>

        <div style="background-color:#66FFCC; width: 150px; float:right;">

        column 3

        </div>

    </div>

</div>

<!-- containter end -->

drhowarddrfine

There are a lot of ideas floating around on how to do it. I don't know if you cooked that one up on your own but I can get you some links to samples or look up some of my own (since I can't remember how I do my own stuff the day after). Yours looks good, though.

David Laakso

Best is a matter of opinion. What you have will work as intended in compliant browsers. If you also want it to work in non-compliant browsers -- any version of Internet Explorer -- you'll need a doctype. Either way:

Expand|Select|Wrap|Line Numbers

 
Add overflow:hidden to enclose the floats.

<div style="width: 800px; border: 1px solid #ccc;overflow:hidden">

HTML inline styles for 3 column tabless

re: HTML inline styles for 3 column tabless

re: HTML inline styles for 3 column tabless

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about