Better solution of elements in html and css

Question

I have some issues of elements position in html in css i have two examples, but can some one tell me what is right solution??

HTML

<div class="wrapper">
<div class="left-col"></div>
<div class="right-col"></div>
</div>

Solution 1 CSS

.wrapper{
width:100%;
}
.left-col{
width:50%;
float:left;
}
.right-col{
width:50%;
float:right;
}

Solution 2 CSS

.wrapper{
width:100%;
}
.left-col{
width:50%;
float:left;
margin-right:-50%;
}
.right-col{
width:50%;
float:right;
margin-left:-50%;
}

There some - margins that someone use, is minus margin right solution?

Answer 1

I think solution 1 is better and more simple. As Oriol's example. The div after the wrapper overlaps the wrapper. You can use table also.

Answer 2

CSS negative margins goes all the way back to CSS 1.0 and is even supported (if albeit poorly) but IE 4.0. I use negative margins for a few things, most notably perfect-pixel form fields. My site has a sign-in form where regardless of the width of the page/screen (e.g. 800x600 or 1920x1200) there will always be one pixel between all the form fields and it remains that way while you actively resize the window. It's also aided by using padding though keep in mind that you want to use padding sparingly, using margin is almost always the way to go. If you think you need padding on an element simply give the child element/children elements margin and you'll have a lot less layout issues. In general you want to avoid using position as it is not appropriate to use in most instances.

I recommend checking out my CSS float and margin tutorial to start with the basics and then use Firebug with Firefox to use the DOM inspector to make LIVE changes to the DOM on my site for example so you can see how changing various CSS properties changes things.