for reference here is a jsfiddle link:
http://jsfiddle.net/STmwz/4/
To start off with, there is only the top div. When the user clicks the edit button, I have some javascript to replace the top div with the bottom div. Problem is, when the replace happens, there is a slight twitch of sorts: everything jumps a couple of pixels.
I think the best way to fix this would be to have the top div vertically aligned. I have a height set for the top div that matches the height of the bottom div when it replaces the top one. So if both are aligned vertically, then no jump!
Problem is, vertical-align isn't working on the top div.
Any idea on what I could do?
I believe the elements that you want to vertically align must have "inline" or "table-cell" display.
Source: https://developer.mozilla.org/en/CSS/vertical-align
Here's an example of it working: http://jsfiddle.net/STmwz/19/
Related
I'm working on a simple design here, but i have a little issue.
Please have a look at the final design example here: http://ronnieaarebrot.com/demo/cms/
On the menu to the left and right, you can see a small border going from the top to the bottom (following the height of the center content).
How can i do this? i was planning on having a background-image with the small border on both sides, but how should i "calculate" the height of the center content? or make the two borders follow the height of the center div. This is a bit hard to explain.. but check the image and here is an html example of how far I've come. http://ronnieaarebrot.com/demo/cms_html/
Any good solutions?
The easiest way would be to contain the centre content in a div element and use the border CSS property to apply it. You can then adjust padding and margins to butt the centre and side elements against one another. Given the model, it seems like some padding on the centre element combined with almost no margins on the sides would do the trick.
If you put overflow:hidden on the #page_wrap element that it will extent to the height of its contents (the left, center and right parts).
So you can put the backgorund image (1px height repeated vertically) on that element and be sure that it will extend all the way down..
I'm trying to achieve the following: I have a central div (wrapper) exactly in the center of my page, both vertically and horizontally. Inside that div I want to have another 2 divs, one of which will contain a logo and the other some text. The logo image also has to be aligned vertically and horizontally to the center of its div. Currently this is what I have:
Here's the jsfiddle with my HTML and CSS: http://jsfiddle.net/7cQhG/
How can I center the logo div (only centered horizontally, and have a 10px margin-top) and have the logo image centered inside that div, both horizontally and vertically, just as it is now)?
Is there any reason you have to have the logo as an img?
I've taken the starting point you gave, and put together a jsFiddle fork : http://jsfiddle.net/mori57/HDmkZ/
I've taken out the img tag, and used it as a background image. "center center" should theoretically center it within its container, and as it's a transparent png, your background color still shows up as you wanted.
Let me know if this works for you, or if you have any other questions.
As a sidebar, you really don't need (and you really shouldn't) to specify your tags in your CSS. The only place that's really appropriate is if you're assigning defaults to a specific tag... otherwise, rules of specificity are already going to take over when you're using those IDs you've got in there.
Note that I wasn't clear what you wanted to do with the text below the logo, so I didn't do any styling, there.
I have got an issue in a header where I want the middle element to stay centered between the two flash end pieces. I put the middle element after the right div in the html, thought I specified the css right, but when I STRETCH the page to the right, the middle element does not move/stay centered. Are you able to see what I'm doing wrong?
From looking at the code on the page you supplied, you need to remove the float:left from the headerCenter div
In a percentage-width container, a H2 is floated left and an image is floated right.
As the browser width is decreased, the image is pushed left towards the H2. When they meet, the logo is pushed down below the H2.
Example JSFiddle:
http://jsfiddle.net/VgS8B/1/
How can I make it so that the text starts wrapping over multiple lines before the image drops down underneath it? Like a sort of CSS "force whitespace wrap"?
This is probably simple but my brain isn't working :(
Is it necessary that the heading be floated left? You could left align it, remove its float, and place it below the image within the HTML to get your desired effect.
try this:
http://jsfiddle.net/VgS8B/5/
I am currently trying to figure out an way to vertically align an div that is inside an div that has an dynamic height due to it's changing content.
So on this jsFiddle is the setup,
in the left div you have the content that is inside an wrapper element with an fixed width. Next to that div is another div, this is an wrapper for an image and a div element. And on the right is an element with an position absolute.
The idear is that the text "this is an image" is vertically aligned to the middle of the left div which is dynamic. I would like to do it with CSS but it seems impossible...
You can check out this fiddle to get some more info
http://jsfiddle.net/36sfx/2/
It seems that the only way to do it is displaying the div as table-cell. I have tried to solve this problem many times before, and I have read before that there are technicals limitation on this issue.