это то, что вы ищете?

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}

<div id = "framecontent">
    <div class = "innertube">

      <h1>CSS Left Frame Layout</h1>
      <h3>Sample text here</h3>

    </div>
  </div>


  <div id = "maincontent">
    <div class = "innertube">

      <h1>Dynamic Drive CSS Library</h1>
      <p style = "text-align: center">Credits: <a href = "http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
      </p>

    </div>
  </div>

Я чувствую твою боль, но стараюсь не смотреть на нее как на потерянное время. Я уверен, что вы гораздо лучше разбираетесь в CSS, чем раньше. Продолжайте работать с ним, и вы начнете видеть преимущества. Я лично считаю, что CSS - одна из тех вещей, в которых требуется много практики, чтобы овладеть им. Я использую макеты на основе CSS в течение 5 лет и до сих пор каждый день изучаю интересные трюки.

Что-то вроде этого:

<div style = "position: relative; width: 100%">
    <div style = "position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style = "position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

Конечно, вам, вероятно, следует поместить стили в отдельную таблицу стилей, а не встроенную. И один столбец фиксированной ширины слева довольно прост, но иногда я вижу другие макеты, которые можно легко сделать с помощью таблиц, но, насколько я знаю, с CSS чертовски сложно.

Почти наверняка есть ответ, который включает применение display: table и display: table-cell к рассматриваемым элементам. То есть ... нет.

Мне нравится, как CSS по-прежнему занимает целую страницу кода, чтобы дублировать пару строк использования таблицы.

После борьбы с войной CSS я пришел к выводу, что «чистый» в глазах смотрящего, и перешел к подходу «давайте просто используем то, что работает».

Используйте CSS для того, для чего он хорош: чтобы все выглядело красиво. По возможности используйте DIV и SPAN. Но если вы обнаружите, что тратите день, пытаясь привести все в соответствие с различными вариантами браузеров, тогда вставьте стол и двигайтесь дальше. Не волнуйтесь, вопреки тому, что думает большинство людей, на самом деле щенок не умрет.

Во-первых, я бы порекомендовал книги Эрика Мейера по CSS, а также ссылку по CSS в в сети: Список отдельно. Я широко использую CSS в своей работе и думаю, что неплохо с ним справился.

При всем при этом: делайте то, что работает. Я пережил именно ту боль, которую вы только что испытали. В конце концов, я решил, что не стоит идти на компромисс со своим дизайном только для того, чтобы сказать, что я не использовал таблицы.

Помните: вам не платят за CSS - вам платят за написание работающего программного обеспечения.

Я думаю, это то, что вы ищете:

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

Отблагодаришь позже. = P

(Я, очевидно, шучу ... вроде ...)

<div style = "width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style = "margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

Это должно сработать (очевидно, реализация будет зависеть от того, где она находится на странице, но я думаю, что это именно та концепция, которую вы ищете).

Вы можете попробовать это:

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto

Вот почему:

http://en.wikipedia.org/wiki/Tableless_web_design

http://davespicks.com/essays/notables.html

Дополнительные инструкции:

    div.row {
      clear: both;
      padding-top: 10px;
    }

    div.row span.label {
      float: left;
      width: 100px;
      text-align: right;
    }

    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
    }


    <div style = "width: 350px; background-color: #cc9;
      border: 1px dotted #333; padding: 5px;
      margin: 0px auto";>
      <form>
        <div class = "row">
          <span class = "label">Name:</span><span
            class = "formw"><input type = "text" size = "25" /></span>
        </div>
        <div class = "row">
          <span class = "label">Age:</span><span
            class = "formw"><input type = "text" size = "25" /></span>
        </div>
        <div class = "row">
          <span class = "label">Shoe size:</span><span
            class = "formw"><input type = "text" size = "25" /></span>
        </div>
        <div class = "row">
          <span class = "label">Comments:</span><span
              class = "formw">
            <textarea cols = "25" rows = "8">
            Go ahead - write something...
            </textarea>
          </span>
        </div>
        <div class = "spacer">
          &nbsp;
        </div>
      </form>
    </div>

Чтобы поддерживать этот вопрос в актуальном состоянии, вот 5 способов добиться того же, используя как CSS2, так и CSS3.

Пример 1: Float & Margin

Так делалось годами: просто и эффективно.

#example1 .fixedColumn {
    width: 180px;
    float: left;
    background-color: #FCC;
    padding: 10px;
}
#example1 .flexibleColumn {
    margin-left: 200px;
    background-color: #CFF;
    padding: 10px;
}

<div id = "example1">

    <div class = "fixedColumn">
        Fixed Column
    </div>
    <div class = "flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 2: CSS calc ();

calc() работает с IE9 и выше, хотя поддержка в некоторых версиях браузера Android немного нестабильна: http://caniuse.com/#feat=calc

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;   
    background-color: #FCC;
    padding: 10px; 
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
    background-color: #CFF;
    padding: 10px;
}

<div id = "example2" class = "calc">
    
    <div class = "fixedColumn">
        Fixed Column
    </div>
    <div class = "flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 3: отображение CSS в виде таблицы

#example3.table {
    display: table;   
    width: 100%;
}
#example3.table .fixedColumn {
    width: 180px;
    display: table-cell;   
    background-color: #FCC;
    padding: 10px;   
}
#example3.table .flexibleColumn {    
    display: table-cell; 
    background-color: #CFF;
    padding: 10px;  
}

<div id = "example3" class = "table">
    
    <div class = "fixedColumn">
        Fixed Column
    </div>
    <div class = "flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 4: CSS3 Flexbox

У Flexbox на удивление хорошая поддержка в браузерах: http://caniuse.com/#search=flex

#example4.flex {
    display: flex;
}
#example4.flex .fixedColumn {
    width: 180px;
    background-color: #FCC;
    padding: 10px;  
}
#example4.flex .flexibleColumn {
    flex: 1 100%;
    flex-basis: auto;
    background-color: #CFF;
    padding: 10px; 
}

<div id = "example4" class = "flex">
    
    <div class = "fixedColumn">
        Fixed Column
    </div>
    <div class = "flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 5: CSS3 Grid

На данный момент единственными браузерами, поддерживающими реализацию CSS3 grid, являются IE10, IE11 и Edge (отсюда и префиксы браузера -ms-), поэтому убедитесь, что вы просматриваете это в одном из них, иначе он не будет работать правильно.

РЕДАКТИРОВАТЬ Я включил сюда экспериментальную спецификацию Chrome, которую вы можете просмотреть, включив экспериментальные функции в Chrome, которые подробно описаны в здесь.

http://caniuse.com/#search=grid

#example5.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    -ms-grid-rows: auto;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
}
#example5.grid .fixedColumn {
    -ms-grid-column: 1;
    background-color: #FCC;
    padding: 10px;
}
#example5.grid .flexibleColumn {
    -ms-grid-column: 2;
    background-color: #CFF;
    padding: 10px;
}

<div id = "example5" class = "grid">
    
    <div class = "fixedColumn">
        Fixed Column
    </div>
    <div class = "flexibleColumn">
        Flexible Column
    </div>
    
</div>

Вот код, в котором представлены все 5 техник:

2 колонны (1 фиксированная, 1 гибкая) 5 разных способов!