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;
}
Related
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.
I've been struggling with div alignments for a while. I have one pop-up in which I have 4 inline-block divs. Now when all of them have no content, the alignment seems to be fine. But as soon as I add some input button tags in one of the div, that particular div goes off alignment.
Here is HTML/CSS in jsfiddle
Any suggestions on what's wrong with CSS. Thanks you.
Give .selectDiv "vertical-align:top;" and .vBtnBar "margin:10px;"
Here (on Chrome 10) the footer seems to be aligning with the side bar (too far to the right) instead of center like it's supposed to be.
I didn't edit the footer's CSS. I was editing the sidebar and the index when this happened, but it's so far down the page that I didn't notice 'til later, so I have no idea what the problem is.
Any suggestions welcome! Thank you :)
Tara
UPDATE: I've checked all the DIVs are correctly closing. Some were missing in the side bar, and that's fixed the problem on the front page but not on sub pages or articles. Now there is a black line appearing at the top (under the menu) that appears to be the #footer!!. I can't understand why it's there.
you wrapper #casing contains floated elements, which are not cleared for following elements.
#casing { overflow: hidden; }
This should fix it for modern browsers. I recommend this article for better understanding and other clearing solutions.
You need to clear your floated elements by adding clear: left; to your #footer css.
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%;
}
I'm currently redesigning a website and have run into an issue with some elements in the header. The header contains a logo, some text and a navigation bar. Between the bottom of the logo and the top of the navigation bar there is a relatively thick gap, shown in this screenshot:
I don't want the gap, I don't know where it's come from and I don't know how to get rid of it :(
I can reduce it down to a single pixel by setting the line-height property of the div containing the logo down to 0.0, but it seems hacky and still doesn't fix the issue.
The work-in-progress version can be viewed live here, if anyone with more HTML/CSS experience can identify any silly mistakes I've made.
add the following css class
.logo img
{
vertical-align:bottom;
}
The space comes from descenders which allow y and g characters to fully fit vertically.
display:block; or vertical-align:bottom; should equally work.
img { display: block; }
The gap is there because images are inline elements aligned at the text baseline by default. It's where descenders would go if you had text with descenders in the same line.
It looks like you're getting some spacing from both the <div class="logo">, and from the <a href="#"> which wrap your logo. You can fix this using the display:block; or vertical-align:bottom; as mentioned above.
Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
The <a> containing the element should have display:block; position:relative and the image should have position:absolute. Works here.