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.
Related
In the following code, the #wrapper div contains the #left and the #right div. But they do not turn out to be contained inside the #wrapper div.
I want them to be treated as the content of the #wrapper div, so they are contained inside it, leaving the 10px padding applied to the #wrapper. Why are they displaced?
JSFiddle here.
<div id="wrapper">
<div id="left">Alpha</div>
<div id="right">Bravo</div>
</div>
The CSS is as follows.
#wrapper {
background-color:grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding:10px;
}
#left {
background-color:yellow;
float:left;
}
#right {
background-color:pink;
float:right;
}
I want to solve this without manipulating position attributes of the #wrapper as that might disrupt the normal structure of my page (I'm afraid so).
Because you are floating them so they sit outside of the DOM flow. If you want the parent to consider them, add overflow: hidden to the parent CSS or add a div at the bottom of the container with the rule clear: both;
Demo : http://jsfiddle.net/cros1mrv/1/
You should set the overflow of your wrapper to overflow: auto to flow around your floating divs.
#wrapper {
background-color: grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding: 10px;
overflow: auto;
}
See this fiddle.
Because of floating. One way to clear that is to use:
#wrapper {
overflow: hidden;
}
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
}
Following my code:
HTML:
<div>aaaaaaaaaaaaaaa
<span>test</span>
</div>
CSS:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
}
span{
float: right
}
I would get this result: http://oi41.tinypic.com/2py25w1.jpg
I would like the text right-floated should not have to get out the div, so it must go to a new line inside the div when needed, as in the code that I posted.
In this case, for example, there is no need to let go of the text in a new line, because the text fits on the right of the text: http://jsfiddle.net/3kRan/2/
Set the overflow on your div to hidden like so:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
overflow: hidden;
}
Your contents are overflowing when the span tries to float. This will allow your span to stay within its parent container.
This answer depends on your ability to wrap your text in an element, such as p. The ending result would be:
<div><p>aaaaaaaaaa</p>
<span>test</span>
</div>
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
height: 100%;
overflow: auto; /* fix to clear the parent */
}
p {
padding:0;
margin:0;
}
span{
float: right
}
Updated fiddle: http://jsfiddle.net/3kRan/5/
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag
What i have so far (some sort of example, not real):
html:
<html>
<body>
<div id="article">
<h1>TITLE</h1>
<p>text</p>
</div>
</body>
</html>
css
#article {
color:red;
border-bottom: 1px solid black;
}
THE PROBLEM!
I cannot divide the border at the bottom and the div itself
this may help you>>
http://dl.dropbox.com/u/22271794/div.PNG
SOLVED!!
HR TAG HELPED ME!!
Search Google for> HR TAG STYLING AND THAT'S IT (MARGIN ZERO, CHANGE COLOR)
just set a padding-bottom to the div itself, e.g.
#article {
color : red;
border-bottom : 1px solid black;
padding-bottom : 1.5em;
}
The border is placed at the bottom of the div. That's the point and there isn't anything you can do about that. If you want it to be visually separated from the content inside the div, you should add some padding at the bottom.
Are you looking for padding or margin?
With those you can style the placement of the div and its border.
#article {
color:red;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
If this is not what you mean, what do you mean with dividing a border? This is not what you meant.
Edit: After seeing that image you added, i think you should find some other solution then pure css.
I would see an solution with a div that contains some element that hugs the bottom, and is white of color.
<div id="article">
<div></div>
</div>
#article {
color:red;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
#article div {
// add some positioning.
margin-top: 99%;
height: 1%;
color: white;
}
This should give you some control over that whitespace you need.
Again, I don't think it is possible to do this on CSS alone.
If you're using an image then you can just do it like this:
img {
padding-bottom:10px;
border-bottom: 5px solid red;
}
See this jsfiddle
But if you're using a div with a background then you could do it using an extra div to produce the gap. Eg:
<div>
<div id="content"></div>
<div id="space"></div>
<div id="border"></div>
</div>
and CSS:
#content {
width:200px;
height:100px;
background:#000;
}
#space {
width:200px;
height:20px;
}
#border {
width:200px;
height:10px;
background:red;
}
See this jsfiddle
It can be done with CSS, but probably not the most cross-browser friendly way of doing things.
html
<div>Text Here</div>
css
div, div:after {
display:block;
background:#00f;
width:100px;
}
div:after {
content:" ";
border-top:1px solid #FFF;
border-bottom:3px solid #000;
}
Demo http://jsfiddle.net/2BQ8f/