Divide HTML page in half with no overlapping

css, html

Solution

You should float both columns to the left. For the problem you reported in your comment, use `word-wrap: break-word;` BUT also don't use fake words 90 characters long, that doesn't exist in any human language except some welsh villages. Finnish and german have long words but still. Use `lorem ipsum` instead. URLs can still be quite long.

Here's a demo: http://jsfiddle.net/xZJyE/

HTML:

<div id="content">
  <div class="left w50">LEFT</div>
  <div class="left w50">lorem ipsum</div>
</div>

CSS:

html {
    font-size: 62.5%;
}
body {
    background-color: white;
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.4em; /* equiv 14px */
    line-height: 1.5; /* adapt to your design */
}
/* you shall not pass */
div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
}
.left {
    float: left;
}
.w50 {
    width: 50%;
}

Problem

I want to divide my HTML page into two columns of equal width, so that each half is like a page on its own, and its content does not go into the other half. I did `float:left` for `#left` and `float:right` for `#right`, but the content overlaps into the other half. How can I achieve the goal? ``` <div id="content"> <div id="left"></div> <div id="right"></div> </div> ```

Original source