I'm trying to recreate a site-wide announcement similar to yours truly, stackoverflow.
http://jsfiddle.net/cuMDM/14/
I'm having two issues:
(1) I can't get the outer div element to appear below the announcement container.
(2) I want the announcement container element and the outer div element to be of the same width and both centered in the page.
Any help would be greatly appreciated.
The position:fixed on your announcement container means that both it and the outer container will have their top position at 0. You can add a margin or a position to the outer container to change this.
The announcment container already has a width of 100%. Are you opposed to putting width:100% on the outer container, and then centering any content for it that you want using some other technique?
Related
I have a container DIV that is resizable. I allow the user to add DIV elements to it, to create some sort of a playlist. When the container DIV is not large enough for a content DIV to be appended, I want the content DIV to just get cut off at the end of the container DIV. Unfortunately it always gets appended underneath other content elements. I tried overflow:hidden; for the container element, but that didn't have any effect...
overflow:hidden;
is a good choice, but you need an inner container where contents can be added horizontally, an inner container larger than the visible outer one.
Fiddle
Add white-space:nowrap to your parent div. When you add children they will be appended without breaking to the next line - even if the parent container is not as wide as the width of the children divs.
FIDDLE
What I'm trying to achieve:
Two plus rows with each containing three columns. For the rows, I have specified relative positioning containing three images per row, for two rows. This works fine.
I want layered divs beneath those images, using position absolute and negative z-index, which also works fine for the first row. The second row, the images line up fine, but the absolute positioned divs within appear on the first row.
jsFiddle here:
http://jsfiddle.net/Ajdin/tNGCM/
I've read a few questions on the board, and googled css absolute positioning since that's where I'm thinking I may be misunderstanding something. Please help :)
Since the div ".hireBioImg" set "float" property, it wont be extended the height to its parent. so in hireBioRow, you need to add "clearfix" to wrap float elements inside.
Please see updated here:
http://jsfiddle.net/tNGCM/1/
And more about clearfix:
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
http://www.webtoolkit.info/css-clearfix.html
I have a DIV that contains user-generated contents. These contents may and will start with an item that has a margin-top and that margin-top overflows the container so that there will be a gap between the container and preceding elements. I found out you can set the container to either display:inline-block, float:left/right or give it a padding-top value.
If you do one of the first 2 options the container will shrink its width to its contained elements. Padding-top is not an option because of the gap that the padding will generate. Basically you could set a specific width to the container but the problem with that is that there's a templating system with 60+ layouts and I cannot edit all of them.
So I was wondering, do you see any CSS-way to get rid of that margin-overflowing problem or the shrinking-problem here?
One of the ways is to add "overflow: hidden;" to its parent. But it not always an option if you have content that you want to overflow parent's boundaries.
Example: http://jsfiddle.net/cLxhE/1/
Another way is to use pseudo-elements to clear it. But it will not work in IE7 and below.
Example: http://jsfiddle.net/cLxhE/2/
You could add this to the top of your container div before the user added contents:
<div> </div>
Then give it a height of 0px.
I have a div that has a bunch of child divs. I would like the last N child divs to stack on top of one another at the bottom. So, the idea would be that the last one would be all the way at the bottom, and the one before would be just above it, etc.
I realize that I can position them absolutely, but then I have to use javascript to manually move them off from the bottom (setting the bottom property to their height * their reverse order). I was hoping there's a straight CSS way to accomplish this task, but I'm not seeing it.
All help welcome.
Wrap the child divs in another div that is positioned absolutely to the bottom, and then they should stack normally within that div.
Example: http://jsfiddle.net/34rRB/
Doing some css, so threw this quick fiddle together to show the issue I am having.
http://jsfiddle.net/ozzy/LJKsA/
The div block in center of the demo, is overlapping the container div.
Can you suggest a fix for this please, it always trips me up.
The center div can be larger as content is added, so outer div container needs to handle this also, and retain margins
You can add clear: both to the last element inside the containing div.
This is asked 10 times a day on StackOverflow. It's because you're using float ont he children of the container div. Just impleemnt overflow:hidden to it and it should work.
Search more about clearfix, also.