0

I need to have blocks like on image:

enter image description here

but after I have added this code:

    <div style="width:100%; height:50px;">
         <div style="display: inline-block; width:50%; height:50px; background-color:green;"> </div>
         <div style="display: inline-block; width:50%; height:50px; background-color:red;"> </div>
 </div>

I have this result: enter image description here

Improve this question
2
  • There are many ways to solve this issue. one of them is this fiddle. Commented Jul 30, 2013 at 12:18
  • Could you please accept whichever answer helped you? Or is it still not working? Commented Jul 30, 2013 at 12:52

7 Answers 7

Reset to default
5

Float vs display: inline-block

The reason your code doesn't work is because you are using display: inline-block;. If you use float: left; it will make the elements that have this property float against eachother without bumping other elements down as long as these other elements have float aswell (except for when the width exceeds the width of the screen).

CSS Float

Bad coding conduct

You could ofcourse change the font-size or comment out the whitespace or even remove the closing tags (which is supported by HTML5) but these methods are only a plaster on the wound (and are very bad coding conduct, please don't ever do this). If you use float to make the elements fit you won't have to do any "fix" to make it work.

examples of good coding practices

Look at 1, 3 and 4 specifically, but the entire page is a very good read.

CSS

On the topic of assigning css: You should always use class-based styling instead of inline css for the following reasons:

  1. It's easier to read (for both you and others) and looks nicer.
  2. It allows the use of external CSS files.
  3. It allows easier use of JQuery or Javascript with class/id selectors.
  4. It's a more professional method of coding.
  5. You can assign multiple classes to one element, removing the need of writing the same code twice.
  6. Easier to debug code in consoles (FireBug/Chrome console).
  7. All the cool kids are doing it.

Different methods of assigning style to elements

Try the following:

Working Fiddle

<style>
    #main {
        width: 100%;
        height: 50px;
    }
    #green {
        width: 50%;
        height: 50px;
        background-color: green;
        float: left;
    }
    #red {
        width: 50%;
        height: 50px;
        background-color: red;
        float: left;
    }
</style>
<div id="main">
    <div id="green"></div>
    <div id="red"></div>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Elaborate why the -1? The code is not only functioning 100% flawlessly with a JSFiddle example included, it's also much easier to read.
You must explain why you opted for the alternate method. that will help other users to understand your perspective. :)
Not sure why this was down voted. It's the best and only answer imho.
You should really gather evidence before throwing accusations because I can assure you I didn't downvote the question, here's an upvote because 1) Proof I didn't downvote and 2) I have looked into it and it turns out you have a better answer. I'm not somebody who is going to downvote someone out of spite, I will upvote the most appropriate answer.
I don't believe omission of any closing tags will help here, furthermore it's just bad practice; you gain nothing and it's harder on the eyes (and on parsers)
|
4

Because you have set the display type to inline-block, your browser will take into account any whitespace. Comment it out and you should be ok:

<div style="display: inline-block; width:50%; height:50px; background-color:green;">
</div><!--
--><div style="display: inline-block; width:50%; height:50px; background-color:red;">
</div>

Here's a JSFiddle that compares the two.

Improve this answer

11 Comments

Instead of removing white spaces , it is possible to use white-space:nowrap;
You should never comment out "whitespace" between lines of code, as this will create very ugly and unreadable code. Remove the inline-block and add float: left; for it to work. Code will stay neat and it is HTML5.
@Cherniv However, that will still show the space between the two elements.
@F4r-20 It's bad coding conduct. Sure it might work, but so does lining out elements using tables (which you can and should be laughed at for even thinking about it). Sure it's a personal preference, but not one that should be supported. This technique is old, even for HTML4.
@Parrotmaster please provide proof that the comment hack is HTML 4 only as I am calling rubbish. Float / Comment hack / Negative Margin / 0px font-size are all solutions to the OPs issue. (ref: css-tricks.com/fighting-the-space-between-inline-block-elements) Its up to the OP to decide what is best for them, they don't need one solution rammed down their neck.
|
2

try this

remove display:block and write float:left;

http://jsfiddle.net/2Xh75/2/

<div style="width:100%; height:50px;">
         <div style="float:left; width:50%; height:50px; background-color:green;"> </div>
         <div style="float:left; width:50%; height:50px; background-color:red;"> </div>
 </div>
Improve this answer

Comments

2

What causes your problems is the whitespace all around.

Remove all spaces and tabs between the two divs, and it will work just fine.

<div style="width:100%; height:50px;">

     <div style="display: inline-block; width:50%; height:50px; background-color:green;"></div><div style="display: inline-block; width:50%; height:50px; background-color:red;"></div>

</div>

http://jsfiddle.net/9UDPh/1/

Of course, in real you should move the styles to a class, avoid inline styling whenever possible.

Improve this answer

1 Comment

+1 for supporting class styling. inline styling should never be used, ever.
1 
<div style="width:100%; height:50px;">
     <div style="float:left;display: inline-block; width:50%; height:50px; background-color:green;"> </div>
     <div style="display: inline-block; width:50%; height:50px; background-color:red;"> </div>
</div>
Improve this answer

Comments

0

float is forcing the elements to be inline to each other. also you can make the width a less a little bit for example 49% for each it will work even without floating.

Improve this answer

1 Comment

Messing with values like using 49% just to make elements fit is VERY bad coding. This might work if your website is only ever visited by only one browser type, version and screen size.
0

the comment trick works to get rid of white space in between, you can also try this

     <div style="display: inline-block; width:50%; height:50px; background-color:green;"> </div
     ><div style="display: inline-block; width:50%; height:50px; background-color:red;"> </div>

set parent div font-size to zero! will do the trick as well

Improve this answer

2 Comments

Please refrain from using this method, as it makes the HTML harder to read. The font-size fix works, but again is a plater on the wound, and will make the code harder to work with in the future, especially for beginning programmers.
i totally agree with you, better force it to float

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.