How to make a stable two column layout in HTML/CSS

by

Here you go:

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

See it in action here: http://jsfiddle.net/FVLMX/

More Related Contents:

  1. How to place a div over a image? [closed]
  2. elements are not centered aligned inside the wrapper and when I set the width of the wrapper it goes out of the browser width..any solution?
  3. Can’t scroll HTML page down to see full content
  4. What’s wrong with this div? [closed]
  5. Center a DIV horizontally and vertically [duplicate]
  6. How to Right-align flex item?
  7. flex container min-height ignored in IE
  8. float does not work in a flex container
  9. Is there a way to style part of an input field’s value? [duplicate]
  10. Css height in percent not working [duplicate]
  11. How to change color of disabled html controls in IE8 using css
  12. Why is an element with position: fixed moving with a non-positioned sibling?
  13. Printing HTML table with many columns/rows using CSS layout?
  14. flex-grow not working in column layout
  15. Min-width and max-height for table attributes
  16. How to change the style of the title attribute inside an anchor tag?
  17. Empty vertical space between columns in Bootstrap 4
  18. Best way to implement background image on HTML or body
  19. How to vertically align text with icon font?
  20. Css transition from display none to display block, navigation with subnav [duplicate]
  21. Is there a css selector for selecting an element futherup in the html?
  22. Responsive image align center bootstrap 3
  23. Select option padding not working in chrome
  24. How can I align text directly beneath an image?
  25. Background-Color of BODY tag applied to the whole HTML [duplicate]
  26. click link below a higher z-index div [duplicate]
  27. Img’s max-height not respecting parent’s dimensions
  28. backdrop-filter not working for nested elements in Chrome
  29. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  30. How to play CSS3 transitions in a loop?

Leave a Comment