ansaurus

Question

Floated elements gaps between but no explicit padding/margin

Answer 1

+1 A:

This seems pretty close:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#outer { margin: 0 auto; width: 600px; background: yellow; overflow: hidden; text-align: right; }
#outer div { float: left; }
</style>
</head>
<body>
<div id="outer">
<div>Some data</div>
<span>More data</span>
<a>Link 1</a>
<a>Link 2</a>
</div>
</body>
</html>

The containing element is a block level element and thus as wide as it needs to be. Set the text alignment to right and the inline elements go to the right in the correct order. A float left on the first div keeps it on the left.

cletus 2009-10-28 15:20:53

ansaurus

tags:

views:

answers:

Floated elements gaps between but no explicit padding/margin

related questions