CSS Sibling Selector not working (Not using >)

Question

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>

Pokechu22 · Accepted Answer · 2014-09-07 02:28:48Z

2

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%;
}

edited Sep 7, 2014 at 2:28

Pokechu22

5,0569 gold badges39 silver badges64 bronze badges

answered Sep 6, 2014 at 23:39

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julio Revka Over a year ago

Thanks. This was me experimenting with an example. I wonder why the content padding was floated left in the first place since now that I think about it, it doesn't seem to really make sense with padding.

Anonymous · Accepted Answer · 2014-09-06 23:38:55Z

1

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
}

answered Sep 6, 2014 at 23:38

Anonymous

10.2k3 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

CSS Sibling Selector not working (Not using >)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related