CODEWITHSUNDEEP
htmlcss
Sam Chahine
Sam Chahine

Reputation: 620

Expand width of div depending on the content

I've gone through so many questions answered on this site and nothing will work. I have a container and I'm trying to allow horizontal scroll on my smaller divs and it will not let me.

CSS

#theLoopTasksLabels {
    width:90%;
    height:90px;
    position:relative;
    margin-top: 60px;
    margin-left:10px;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
    float:left;



}

#categoryTasksLabels {
    height:70px;
    padding:5px;
    margin-left: 10px;
}

#categoryTasksLabels  > h6 {
    padding-top:2px;
    padding-left:10px;
    color:#B6B6B6;
}


#loopsTasksLabels {
    width: 110%;
    height: 90px;
    display: inline-block;
    float:left;



}

#loopsTasksLabels > div {
    display: inline-block;
    float:left;
}

#circleTaskLabels {
    padding:5px;
    border-radius: 3px;
    display: inline-block;
    margin-top:4px;
    color:#fbfbfb;
}

HTML

<div id="theLoopTasksLabels">


        <div id="loopsTasksLabels">

                <div id="categoryTasksLabels">

                    <div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
                    <h6><span> 4</span> | <span>6</span></h6>

                </div>

                <div id="categoryTasksLabels">

                    <div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
                    <h6><span> 4</span> | <span>6</span></h6>

                </div>

                <div id="categoryTasksLabels">

                    <div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
                    <h6><span> 4</span> | <span>6</span></h6>

                </div>

        </div>


</div>

For reasons unbeknownst to me, it is not working. I tried adding everything other answers have told the question's OPs, but nothing.

I just acts as a horizontal scroll until I've overfilled the div's width with content. The content I'm trying to scroll through is <div id="categoryTasksLabels"> how ever many the user creates, so there is no set number. I don't know what else to do.

Thank you in advance.

Upvotes: 0

Views: 49

Answers (1)

leuquim
leuquim

Reputation: 655

To start off, you shouldn't be using ID's to style multiple elements, use classes instead.

Apart from this, removing the "float: left" from ".loopsTasksLabels > div "seems to make it work for me.

Upvotes: 1

Related Questions