CODEWITHSUNDEEP
htmlcss
powercoder23
powercoder23

Reputation: 1404

why margin left in this example is not working?

I have created a simple example of 3 columns, here if one expands the other two will also expand.

Below is the HTML code

<div id="outer">
    <div id="inner">
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
    </div>
    <div id="inner">
        Hello world!
    </div>
    <div id="inner">
        Hello world!
    </div>
</div>

CSS code

#outer {
    width:500px; 
    background:#FFCCCC;
}

#inner {
    background:#FFCC33;
    padding:10px;
    width:100px;
    margin-left:25px;
    display:table-cell;
    border:1px solid #F00;
}

JSFiddle http://jsfiddle.net/KCzq3/6/

Update:

see in the html if you increase the conent of one div the other two divs will show the same height of the maximum high div, now if table-cell doesn't works, what can be the solution for this i cannot give float or inline block or it will shrink

Upvotes: 3

Views: 74

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105873

if you use the display:table/table-cell layout, then you should use border-spacing to set margin/space in between elements DEMO

Upvotes: 2

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3491

use inline-block instead of table-cell

HTML

<div id="outer">
    <div class="inner">
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
</div>

CSS

#outer {
    width:500px; 
    background:#FFCCCC;
    display: table;
}

.inner {
    background:#FFCC33;
    padding:10px;
    width:100px;
    margin-left:25px;
    display:inline-block;
    border:1px solid #F00;
}

http://jsfiddle.net/KCzq3/8/

if you want to have divs with the same heights so:

change the #outer style to this :

#outer {
    width:500px; 
    background:#FFCCCC;
    border-collapse: separate;
    display: table;
    border-spacing: 12.5px 0;
}

http://jsfiddle.net/KCzq3/11/

Upvotes: 0

Stormkyleis
Stormkyleis

Reputation: 186

If you use display:table-cell the div acts like a table and responds to table commands.

Simply put this in #outer instead, to simulate the cell-spacing effect:

border-spacing:25px 0;
border-collapse:separate;

http://jsfiddle.net/KCzq3/9/

Upvotes: 4

mcn
mcn

Reputation: 721

HTML

<div id="outer">
    <div class="inner">
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
    <div class="inner">
        Hello world!
    </div>
</div>

CSS

#outer {
    width:500px; 
    background:#FFCCCC;
    display: table;
}

#outer:hover {
  width: 750px;
}

.inner {
    background:#FFCC33;
    padding:10px;
    width:100px;
    margin-left:25px;
    display:table-cell;
    border:1px solid #F00;
}

RESULT

Normal State

enter image description here

On Hover

enter image description here

You see, on hover, all of the inner class will expand to width:750px due to the display: table CSS property.

Upvotes: -1

Related Questions