CODEWITHSUNDEEP
htmlcss
Julio Revka
Julio Revka

Reputation: 167

CSS Sibling Selector not working (Not using >)

I understand that in css if you use the ">" then the tag has to be a direct child, however if you use just a space then it will be a sibling selector and as long as the tag is within the other tag the css will be applied. So why is it in the below code, the text in my sidebar is not centering unless I make the sidebar-header div a direct child of the sidebar div?

Relevant CSS:

.sidebar {
    float:right; 
    width:24%; 
    margin-right:1%;
    margin-top:20px;
    background-color: #e5e5e5;
    min-height:400px; 
    border-radius: 6px;
    box-shadow: 4px 4px 10px #999
}

.content-padding {
    float:left; 
    padding:10px;
}   

.sidebar .sidebar-header {
    text-align:center
}

Relevant HTML:

<div class="sidebar">
    <div class="content-padding">
        <div class="sidebar-header">Favorites</div>
    </div>
</div>

Upvotes: 1

Views: 137

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240928

The reason it is isn't working when it is a child of content-padding is because the element is being floated. When a floated element has a width of auto, it has a 'shrink-to-fit' width. Thus, the child element technically is being centered, you just can't tell. If you want it to work as expected, either don't float the element, or give it a width of 100%.

Example Here

.content-padding {
    float:left;
    padding:10px;
    width: 100%;
}

Upvotes: 2

Anonymous
Anonymous

Reputation: 10216

Remove float:left; to .content-padding

JSFiddle - DEMO

CSS:

.sidebar {
    float:right;
    width:24%;
    margin-right:1%;
    margin-top:20px;
    background-color: #e5e5e5;
    min-height:400px;
    border-radius: 6px;
    box-shadow: 4px 4px 10px #999
}
.content-padding {
    padding:10px;
}
.sidebar .sidebar-header {
    text-align:center
}

Upvotes: 1

Related Questions