Divs are not appearing next to each other

Question

I am building a backend for a website and I got a strange behavior of display table/cell/row

html

<div id="App">
            <div id="AppFrame">
                <div id="AppMenu">
                    <div id="AppMenuContent">test</div>
                    <div id="AppMenuLog">test</div>
                </div>

            </div>
        </div>

css:

 html, body{
                height: 100%;
                margin-left: 0px;
                margin-top: 0px;
                margin-bottom: 0px;

                background-color: #ebebeb;
                font-family:Helvetica;
            }
            #App{
                height: 100%;
                display: table;
                margin-left: 0px;
                margin-top: 0px;
            }
            #AppFrame{
                display: table-row;
                height: 100%;
                margin-top: 0px;
            }
            #AppMenu{
                height: 100%;
                width: 300px;
                margin-top: 0px;
                display: table-cell;               
            }
            #AppMenuContent{
                max-width: 65px;
                height: 100%;
                background-color: red;
            }
            #AppMenuLog{
                margin-left: 65px;
                width: 200px;
                height: 100%;
                background-color: #999999;               
            }
            #AppDisplay{
                display: table-cell;
                height: 100%;
            }

The problem is that, the div "AppMenuLog" will not appear next to the div "AppMenuContent"! I've tried to set the both divs to blocks, changed the width and heights but nothing solves this, can anyone help me?

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

You need to add display: inline-block to #AppMenuContent and #AppMenuLog.

Here's a JSFiddle.

This is a lot better and easier than using float: left; see the reason here.

edited May 23 '17 at 12:11

Community

1
1

answered Apr 28 '14 at 13:29

Kai Feller

653
3
14

score 1 · Accepted Answer · answered Apr 28 '14 at 13:43

1

If you want to go with the table structure check this

DEMO

display:table-cell; needs to be added to #AppMenuLog and #AppMenuContent

answered Apr 28 '14 at 13:43

James

4,540
1
18
34

score 0 · Answer 3 · answered Apr 28 '14 at 13:28

0

DEMO

You need to add float:left to div #AppMenuContent

#AppMenuContent {
    background-color: #FF0000;
    float: left;
    height: 100%;
    max-width: 65px;
}

answered Apr 28 '14 at 13:28

Pravin W

2,451
1
20
26

I'd avoid using `float` to get divs inline, see http://stackoverflow.com/questions/15172520/drawback-of-css-displayinline-block-vs-floatleft – Kai Feller Apr 28 '14 at 13:35
@KaiFeller I disagree, float is a suitable way to get `div`s inline. – Ruddy Apr 28 '14 at 13:42
1

It's not preferable, it will case positioning issues as they are not in the page flow. – Kai Feller Apr 28 '14 at 13:43
Seconding Kai's suggestion. `display: inline-block; vertical-align: top;` is probably what he wants here. Floating block-level elements can cause extra problems requiring a clearfix hack to solve. – James Duffy Apr 28 '14 at 13:47
@KaiFeller You can wrap them in a container if needed. I haven't really look into this question so you could be right in saying for this situation it would not be wise to use it. I'm more talking overall there is no problem using float, I use it all the time and have no problems with it (again, you do need to know when to use it) – Ruddy Apr 28 '14 at 13:51
Read the link in my first comment, you can use float, but it is preferable and will cause less disruption and problems if you use inline-block. – Kai Feller Apr 28 '14 at 14:26

score 0 · Answer 4 · answered Apr 28 '14 at 13:32

0

Next time try to search harder an answer. On this is are a lot of questions similar with your. You need to use float:left;

Here you find your solution http://jsfiddle.net/5G9nJ/5/

answered Apr 28 '14 at 13:32

Aditzu

696
1
14
25

I'd avoid using `float` to get divs inline, see http://stackoverflow.com/questions/15172520/drawback-of-css-displayinline-block-vs-floatleft – Kai Feller Apr 28 '14 at 13:34
Divs have display:block by default with a reason. In my opinion to set a div as inline-block is a big mistake... – Aditzu Apr 28 '14 at 13:37
Yeah and there is `display: inline-block` for a reason, to display blocks inline...if you use the float property there will be positioning issues as they are not in the page flow. – Kai Feller Apr 28 '14 at 13:41
And why do you thing it will pe positioning issues? I'm working for a lot of time with float and all goes perfect. If you can tell what is the problem with my demo I'll give you right. But until then... in my opinion display: inline-block is pointless... – Aditzu Apr 28 '14 at 13:46
Read the link I posted in my first comment, you might learn something. – Kai Feller Apr 28 '14 at 14:09
Frankly speaking I'll try to use display:inline-block but I've my doubts. I'm affraid i'm "a lost cause" and I got used to much with float. From my point of view working with float is pretty easy is you know to clear it after. But I'll try this option to. Good chat @Kai :) – Aditzu Apr 28 '14 at 14:23
Yup, try to use `inline-block` - it'll make your life a lot easier! – Kai Feller Apr 28 '14 at 14:25

Divs are not appearing next to each other

4 Answers4

DEMO