HTML inline styles for 3 column tabless

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Niheel
    Recognized Expert Moderator Top Contributor
    • Jul 2005
    • 2433

    HTML inline styles for 3 column tabless

    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.
    Code:
    <!-- 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 -->
    niheel @ bytes
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    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.

    Comment

    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397

      #3
      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:
      Code:
      Add overflow:hidden to enclose the floats.
      <div style="width: 800px; border: 1px solid #ccc;overflow:hidden">

      Comment

      Working...