Vertical alignment of elements whilst using css-float - html

Why won't three elements on the same line get vertically aligned at the same height when using floats?
It appears this is browser specific: the layout is broken in Gecko (Firefox), the right elements is placed on a separate line, whilst the layout is fine in Chromium.
HTML markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="center" href="center">center</a>
<a class="right" href="right">right</a>
</p>
</div>
CSS styles:
div{width: 100%;margin: 20px 0; }
div p{width: 100%; white-space: nowrap; text-align: center;border: 1px solid blue;}
a.left{float: left;}
a.center{}
a.right{float: right;}
This is the layout result in FireFox:
For convenience: take a look at this fiddler.
I know I have seen this problem before, but I just pull my hair and cannot find a solution for this!

Ok, it appears that there is a very simple workaround that actually "just works" for me. I post it as a question since I did not receive any (usable) answer for such a basic question.
The layout is fine in Gecko (Firefox) when the right element is placed before the center element in the html markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="right" href="right">right</a>
<a class="center" href="center">center</a>
</p>
</div>
I have no idea why this logic applies, but I am convinced that the Mozilla people will have perfect reasons why this behaviour is just right...

Related

HTML table: text in 1st column is under the image in 2nd column

Being a professional C++ programmer, I'm a very new to HTML :)
The problem is reproducible under Internet Explorer 11 Windows 10.
Other browsers (Edge, Firefox, Chrome) - works fine.
Code:
<table>
<tr>
<td width=500><h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
<br><br>
</td>
<td width=20></td>
<td><img style="vertical-align:top;" src="main_window.png" /></td>
</tr>
</table>
Problem is shown on this screenshot:
Here is how it should be and how it is in non-IE browsers:
Addition:
Here is how it looks using DIV code below :( Image is above the text:
Here's a more simple version. And yes, please avoid use table tags for general layout:
.prod-img {
margin-left: 20px;
float: right;
}
/* this is optional if you want to set an overall width */
.outer-container {
width: 700px;
}
<div class="outer-container">
<img src="http://placehold.it/350x150" class="prod-img">
<h1>Free Monitor Manager</h1>
<p>It's a simple utility.</p>
</div>
Fiddle here:
http://jsfiddle.net/mark47/5mt66fpL/
The CSS "floats" the image to the right side of the parent container. We're adding a margin-left: 20px to it so there's always some space between it and the text.
Setting an overall width is optional. Could also use max-width
Trust me, you still want to do this sort of thing with DIVs rather than a table.
Like this:
<div style="width:350px;float:left">
<h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
</div>
<div style="position:relative">
<img style="vertical-align:top;" src="http://maps.wunderground.com/data/images/ne_rd.gif" />
</div>
In short, this builds two divs, one with your text that is set to the left, and one with the right that is set relative to it.
You can put whatever you want in either side.
But more importantly, this sort of thing is much more cross-browser friendly.

Stack image and text left to right on same row

Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example

<div> with image has a bigger height than expected

Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...

HTML/CSS misplaced header and missing images

I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.

div inside anchor

This doesn't happen all the time. A bug is not a bug if cannot be reproduced!
First, I thought this was a mistake of my young programming skills but same error appears in my two sites, apparently under the same circumstances.
<a style="display:block;" href="link">
<div>text1</div>
<div>text2</div>
</a>
Sometimes, while browsing, links with divs inside them render strangely, duplicate elements appear on the page with no reason, text gets distributed between different links, a real mess.
Real screenshots:
http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg
Anyone faced this problem? Is there a solution? I'm not interested of fixes involving JavaScript!
I guess your divs in links cause inconsistency in some browsers (may be your css playing here).
"Semantics", valid markup are some buzz words.
So why would you want DIVs in an <A> tag. You can try someting like this
<a href="#">
<span class="divstyle">Text 1</span>
<span class="divstyle">Text 2</span>
</a>
then in CSS
.divstyle {
display: block; //and other styles etc
}
Check your page in a HTML validator. I'm 90% sure that you can't have a <div> element inside inline elements like <a>. Even though you've set the link to display:block, it's still not allowed and the browsers may be spitting their dummy.
What you can do is use spans instead, setting them to block:
<style type="text/css">
.link, .link span { display: block; }
</style>
<a class="link" href="example.com">
<span>text1</span>
<span>text2</span>
</a>