CODEWITHSUNDEEP
htmlcss
user2565968
user2565968

Reputation:

How align horizontal DIV inside parent DIV?

I want to align horizontal DIVS inside parent div #main and hide horizontal scroll I tried to make such: http://jsfiddle.net/Ty9kg/30/

<div id="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

#main {
    border:1px solid black;
    width:250px;
    height:150px;
    overflow-y:hidden;
    overflow-x:scroll;
}

    #main div {
        width:165px;
        height:120px;
        display:inline-block;
        float:left;
        background:#ccc;
        border:1px solid #ccc
    }

Upvotes: 1

Views: 348

Answers (3)

user2477011
user2477011

Reputation:

I think you want this:

http://jsfiddle.net/umQ32/

html:

<div id="mainContainer">
    <div id="main">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

css:

#mainContainer{
    width:300px;
    height:120px;
    overflow-x:scroll;
}

#main{
    width:1200px;
    height:100px;
    background-color:blue;
}

.child{
    width:200px;
    height:100px;
    margin:0 5px 0 0;
    float:left;
    background-color:red;
}

Upvotes: 0

mnsr
mnsr

Reputation: 12437

If i understand correctly, you want the grey boxes to be next to each other in a row? Currently you've given your main div a width of 250px and the inside divs a width of 165px. For obvious reasons they won't fit.

try this:

#main {
    border:1px solid black;
    overflow-y:visible;
    width:990px;
}

#main div {
    width:165px;
    height:120px;
    display:inline-block;
    background:#ccc;
    margin-right:-4px;
    padding:0;
}

http://jsfiddle.net/Ty9kg/32/

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Do you want the following?

#main {
    border:1px solid black;
    width:250px;
    height:150px;
    overflow-y:hidden;
    overflow-x:scroll;
    white-space: nowrap;
}

#main div {
    width:165px;
    height:120px;
    display:inline-block;
    background:#ccc;
    border:1px solid #ccc;    
    white-space: normal;
}

If so, float was redundant in your code.

Upvotes: 1

Related Questions