Code
http://jsfiddle.net/LtZAv/
What is expected
top shadow of second .child .comment-box is displayed and overlapping the first .child .comment-box
What browser renders
box shadow of second .child .comment-box in the region of div.content with float:right is not displayed.
You have to change the position of comment-box div to relative
like
.comment-box { position: relative; }
so shadow will overlap the first div.
You need to change the display of the li.child so that the contents of div.content do not escape it.
Add this CSS :
li.child { display: inline-block; }
http://jsfiddle.net/stevendwood/LtZAv/2/
Related
I have a question about CSS positioning of :before element to a parent element.
Let's say I have a parent element div like a block of text with background and padding properties and I want to add a small image or icon to this div (e.g. in the right-top corner) and I want this small element to stay there even when resizing the window.
How can I achieve that? Here is a code for :before I tried:
.blure:before {
content: URL(/image.svg);
position: absolute;
margin-left: 73%;
margin-top: -14%;
}
After setting the absolute you can give the left, right, top, bottom properties to element
.blure:before{
content: URL(/image.svg);
display: absolute;
top: 15px;
right: 15px;
}
I am trying to make this Wordpress site responsive, by adding the following custom CSS:
#media (max-width:959px) {
.container, #menu, #featured, .slide .overlay, .slide .overlay2 {
width: 100%;
}
img {
max-width: 100% !important;
height: auto;
}
#menu {
height: auto;
}
}
However, when I move the width of the browser view port to 900px say, #menu (the top navigation menu) will increase in height to accommodate #menu's LI elements which have floated down and left, but #content-full (the parent container of the image slider) will creep up over the bottom half of #menu, hiding the LI elements which have been pushed down and left.
The theme contains:
#content-full {
position: relative;
}
So why does #content-full act like it is position: absolute?
Thanks.
The problem is not with the content but with the header. The #header has an attribute height: 134px. And the #menu inside this header has been given position: absolute. Since absolutely positioned elements are taken out of context before rendering, the parent (in this case #header), would not grow to accommodate the height of #menu as expected. That is the reason why the height has been explicitly specified. The content is not behaving as absolutely positioned. It is the aforementioned behavior of the header that makes it look like that.
One workaround this could be to provide an additional style that changes the height of #header to accommodate the next row of the menu.
Something like this for max-width: 959px
#header {
height: 174px;
}
This would take care of the second row of menu items.
Note: Your background image used for the menu would then break. Because it has been made for that single row of menu. I would suggest replacing that background image, with CSS-gradients and rounded borders.
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
I have following set in the css for the h2 element:
...
width: 10%;
display: block;
background-color: #eee;
overflow-x: visible;
white-space: nowrap;
...
If I have an h2 header with text that cannot fit on one line (on the right-most column) this helps me push the text over to the side. I want the full width of the text to have the background color, and hence the "display: block;" rule. But this does not work. Only the width (10%) is colored.
Any suggestions?
Thx,
Tabrez
Here is an example with sample code: http://jsfiddle.net/VZccE/18
The chosen solution: Got rid of the width from h2 per suggestion from ptriek. I had it sitting there by mistake. It needed to be a couple of levels higher.
Just remove the width? I don't really understand why you set width to 10%?
I understand your question as "I want the header to wrap at width 10%, but still have a background for the entire width (100%)."
If that's what you mean, you can wrap the header in a div. If you apply the background to the div, you can set the header width do whatever you like.
demo
You can force the header to break out of the enclosing div by using absolute positioning. Here's an example:
HTML
<div>
<h2 id="hello">Hello World! I like cookies!</p>
</div>
CSS
div {
width: 50px; height: 100px;
background: #f00;
position: relative;
}
h2 {
white-space: nowrap;
background: #00f;
position: absolute;
left: 0; top: 0;
}
These background colors are just so you can see how the elements are positioned. You still need to specify white-space: nowrap to force the header into one line, but the special sauce that makes this work is the positioning. Notice how the enclosing element has position: relative - this ensures that the absolutely positioned h2 has its position based on the div, not the window.
See this in action: http://jsbin.com/aganam/3