-6

I have this two inline-block div's with width: 50% each. And I need them to fit in one line.

<div class="inline">Left one</div>
<div class="inline">Right one</div>

I already know that this is a practical solution to my problem, but my code to look nice too. 

<div class="inline">Left one</div><div class="inline">Right one</div>

Any good-looking solution for this?

Thanks in advance.

Here is a JSFIDDLE demo: JSFIDDLE

Joaquín O
  • 1,403
  • 1
  • 9
  • 15
  • 1
    Do you mean to say that you want your code to look nice too? What doesn't look nice about what you have right now? – Charles Nov 28 '13 at 23:01
  • You could try floating them. – Ryan Stein Nov 28 '13 at 23:03
  • 1
    I don't want to end a div and start the following in the same line. This is a simple example, but it's less readable in reality (more divs in the same line, and lots of code inside them). I like good indentation. – Joaquín O Nov 28 '13 at 23:04
  • http://stackoverflow.com/questions/5184512/cant-get-rid-of-spaces-between-inline-block-elements – kapa Nov 28 '13 at 23:04
  • @bažmegakapa Thanks, but I was hoping that in two years someone has found a better solution.. – Joaquín O Nov 28 '13 at 23:08
  • @JoaquínO The first one seems to be quite active, the last answer being posted a bit more than a week ago. – kapa Nov 28 '13 at 23:11

3 Answers3

0

You can try to apply:

margin:0; padding:0; float:left;

Check this out: http://jsfiddle.net/65adr/7/

Also check out this page for alternatives:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Alessandro Incarnati
  • 6,288
  • 3
  • 32
  • 52
-2

dont know what you want, as long as the second block of codes works why dont you use them?

Or you can use float:left

Andrew Liu
  • 2,238
  • 4
  • 19
  • 29
-2

Add "float: left" to the class...

div.inline
{
    display: inline-block;
    width: 50%;
    outline: solid 1px #F00;
    float: left;
}
Ads
  • 1,802
  • 21
  • 33