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>
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%;
}
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
}
Related
I want my blockquotes aligned, not overlapping. The issue can be seen here: http://ymirsgirlfriend.tumblr.com/post/86505956778/caramelcheese-carry-on-my-wayward-butt
Example Image of requirement.
Here is my CSS:
blockquote {
display: block;
width:200px;
margin-left:20px;
margin-right:10px;
border:1px solid #bbb4b4;
padding: 5px 5px 5px 5px;
border-radius:0px;
color:#aaaaaa;
background-color: #fafaf7;
width:180px;
margin-left:0px;
cursor:url(http://img69.imageshack.us/img69/7673/cursorw.png);
}
Thank you to anyone who looks at the question!
Avoid width and set a negative margin-right. Keep the padding and don't use overflow:hidden, otherwise the content will get cut or too close to the border.
blockquote {
/* width: 200px; no width!*/
margin-right: -6px; /*this is the code*/
}
A JSfiddle would be useful but
#stuff > blockquote {
overflow:hidden;
}
seems to do the trick.
I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?
what<div style="display:inline-block;width:200px;border:1px solid red">hello</div>
If you can wrap a span around the div, like:
what<span><div>hello</div></span>
jsFiddle example
You can apply this CSS to get what you're after:
a {
background: #ccc;
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
div {
width: 100%;
display:inline-block;
border:1px solid red
}
You could wrap everything within a div and give it table and table cell to children:
http://jsfiddle.net/T4Qcd/
.inner{
border:1px solid red;
display:table-cell;
width:100%;
}
a{
display:table-cell;
}
.wrapper{
display:table;
}
You can do so by applying width to both anchor tag as well as the div.
a{
width:10%;
}
div{
width:90%;
}
Your html would be.
what
<div style="display:inline-block;border:1px solid red">hello</div>
Consider this:
<div id="parent">
This is some text
<div id="child">
<ul><li>test</li></ul>
This some other text
</div>
</div>
CSS:
#parent{line-height: 55px}
#child{line-height: 20px}
ul{ margin:0; padding:0; list-style:none}
Problem: Ths links in div "child" not getting line-height:20px. It's getting line-height:55px from the main "parent" div. I tried putting !important, but does not work.
But when I put line-height to the li, then it works.
Who said it's not getting the line-height: 22px;? The line-height of the parent element pushes #child down.
Demo
Demo (When child Inherits the parents line-height)
If you are wishing the child element to stick the parents text, than I think you are not using the right property, you should use padding-top instead.
#parent {
padding-top: 30px;
border: 1px solid #f00;
}
#child {
border: 1px solid #000;
}
Demo
After you edited your question, it still works as expected, I don't know what makes you think it doesn't work. In the below example, I've deliberately added more line-height for demo purpose.
Demo (After you edited your question)
#parent {
line-height: 55px;
border: 1px solid #000;
}
#child {
line-height: 100px;
border: 1px solid #0f0;
}
ul {
margin:0;
padding:0;
list-style:none;
}
ul li {
border: 1px solid #f00;
}
If this is all what you got in your document, than you are wrong, it it still doesn't work in any case, than specificity might be an issue for you which I cannot bet on, as I don't have sufficient resources from your side.
Demo of problem on jsbin.com
I want the child, including it's padding and borders, to be fully contained in the parent.
I want a solution that allows me to specify the child's width as 100%, as in the demo.
Screenshot
HTML
<div class="container">
<div class="child">
some content
</div>
</div>
CSS
.container {
max-width:400px;
padding:0px;
border:1px solid green;
}
.child {
padding: 10px;
width:100%;
border:30px solid #f2f2f2;
text-align:right;
}
Use box-sizing: border-box. Include the -moz- prefix for Firefox which still requires it:
.child {
padding: 10px;
width:100%;
border:30px solid #f2f2f2;
text-align:right;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I have a .container in that there are n number of (left-block and right-block) div's.
left-block is floated left and right-block is floated right.
But I am not getting margin after 1st left-block and right-block and 2nd left-block and right-block
here is a demo: JSBin
Add margin-top to .left-block as well as .right-block
Demo
.left-block {
float:left;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear: right;
margin-top: 10px;
//position:relative;
}
.right-block {
float:right;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear:right;
//position:relative;
margin-top: 10px;
}
P.S Remove the <br /> tags, they are not required.
The above will add 10px margin to top boxes as well, inorder to get rid of it, use the selectors below.
.container > div:nth-of-type(1) {
margin-top: 0;
}
.container > div:nth-of-type(2) {
margin-top: 0;
}
http://jsbin.com/ayiziNa/7/
You have to be careful with floated elements because they become inline elements - you might want to define them as inline-block first, so they are able to maintain margin without causing other problems
Here is the code I applied:
.container > div {
display: inline-block;
margin-top: 20px;
}