Go to my blog and please tell me how to achieve vertical alignment :( My situation truly is different and I need help :)
The reason this is so difficult is because holder is the div that contains everything, outer are the icons at the bottom, and tooltip are the divs that pop up. I need tooltip to be vertically aligned but they are actually below outer. Each icon is connected to their post so you can't keep them all in one div.
how about:
#holder{
bottom:50%;
}
Related
I built a bottom header with a toggle for a menu on the bottom. The toggle portion is not aligning with the <span> right next to it. It's almost exactly one line-height below for some reason.
Code - https://jsfiddle.net/odvd05d8/
I tried using margin but it moves the side divs as well. I also tried to clear whitespace as most of the elements are inline, but that didn't work either.
Any suggestions would be really helpful. Thank you sincerely.
you can use as in css as may it's help you
.dropdown{
top:-20px;
}
I'm having a problem achieving the layout for a website I'm designing.
There are three blue divs across the top of the page under which I have placed four red divs. Each of the red divs will take up just less than a quarter of the width of the page.
After putting an input field in the right most blue div the position of the red divs gets shifted to the right and some red divs appear below others.
I've tried changing the position properties on various divs but can't seem to restore the layout I wanted and have tried adding margins but to no avail.
Can anyone see the problem in my code and/or layout? Any help will be greatly appreciated, I've included all the code in a JSfiddle page.
Many thanks.
http://jsfiddle.net/4cb5za9y/
enter code here<style type="text/css">
There was simply a </div> missing after your input, which broke the layout. Here's the updated fiddle.
I am having trouble figuring out how to arrange the divs on this page so that they will be centered and not left aligned. Also, I wanted to overlay a lock icon in the corner. I was able to get it on there, but i want it to not affect the actual size of the image, but to overlap instead...Here is the fiddle to the CSS and HTML:
jsfiddle.net/bpalmer318/tpb2c7un/1/
To summarize: How do i center all the page content and how do i overlay the second image without making the bottom image smaller? (Note** The images used are just NFL logos but this will be for business purposes with company logos later)
I hope that this post serves to show others how to make complex div pages with overlaying images
Thank you for the help!
You can't center a float element.
Here's a demo using inline-block
there are many ways to center the content of a page. Here just one:
On the html page:
<div id="center">your content here</div>
On the css:
#center{
width:85%;
margin-left:auto;
margin-right:auto;
}
of course the porcentage should be adjusted to your needs i've tried this one in your example and it seems to look centered. Try to get the percentage to be exacly the same with(or maybe a bit more) of the content.
Hope it helps.
you can also see this post it may guide you : How to horizontally center a <div> in another <div>?
I know this has been addressed previously, but for the life of me I can't get it to work with my code (yes, I'm new to this so please be gentle, and do let me know if I am going against SO etiquette!).
Basically, trying to setup a navbar with links centered vertically that become highlighted when hovered over.
I got it setup by eyeballing it and adjusting the margins / padding, but surely there is a better way to to go about this.
Also, how do I go about centering the links horizontally as well?
Here's the relevant code.
http://jsbin.com/wekuqidu/1/
Thanks all!!!!
Here is an example using line-height, you can also try using table-cell to vertically align in the middle
http://jsbin.com/nagoposu/2/
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.