2

I am creating a 2 columns layout and I was wondering if there is a practical difference between using, for the second column, "float: right;" vs. "float: left; margin-left: Ypx".

<html>
<head>
<style type="text/css">
* {
     margin: 0;
     padding: 0;
}

#main {
    width: 900px;
    margin: 0 auto;
}

#right {
    float: left;
    width: 600px;
}

#left {
    float: left;
    width: 280px;
    margin-left: 20px;
}
</style>
</head>
<body>
<div id="main">
  <div id="left">Content of the left column
  </div>
  <div id="right">Content of the right one
  </div>
</div>
</body>
</html>

1 Answer 1

1

The only real difference is that float right will cause that div to stick to the far right edge of the container. This only matters if your container div will change size. Some layouts scale with the size of the browser's viewport, or will change dynamically with javascript. In your case, you have a statically set width, so there is no difference between the two techniques.

The only other difference to look out for is any other divs that float left that follow your right floating div in the DOM. If there is room, these divs will float left, and appear to the left of the div that floats right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.