CODEWITHSUNDEEP
htmlcssjquery-ui
AaA
AaA

Reputation: 3694

CSS float moves content down

Test Cases

I have 3 simple text cases as following:

<div style="border: 1px solid #000;">
    <a href="#" style="">Text1</a>
    <a href="#" style="">Text2</a>
    <a href="#" style="float: right">Text3</a>
</div>

Examining this in IE8, Firefox (23), as expected the Text3 link is aligned to right properly. As soon as I add border to links, Text3 drops down by one pixel (size of border)

<div style="border: 1px solid #000;">
    <a href="#" style="border: 1px solid #000;" href="#" >Text1</a>
    <a href="#" style="border: 1px solid #000;">Text2</a>
    <a href="#" style="border: 1px solid #000; float: right" href="#">Text3</a>
</div>

Now if I try adding padding to links, Text3 drops down much further (12 pixels padding+ 1 pixel border)

<div style="padding: 20px 20px 20px 20px; border: 1px solid #000;">
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text1</a>
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text2</a>
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000; float: right">Text3</a>
</div>

Problem It seems when floating an element, padding and border size are ignored and the actual position of elements are used. I have a multi theme web page. user can choose any of themes from jQuery UI Theme roller In each of these themes the style that I am using for items, have a different padding size (and font size) which makes it impossible to hardcode specific value in CSS to make them stay in same line.

Questions Is this behavior avoidable (Am I doing it wrong)? Is there a workaround to make these links stay in the same line (preferably only css)?

Upvotes: 1

Views: 132

Answers (1)

ralph.m
ralph.m

Reputation: 14345

If you set the other a elements to display: inline-block they will all behave in the same way. E.g. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

a {display: inline-block; padding: 12px;}

</style>
</head>
<body>

<div style="border: 1px solid #000;">
    <a href="#" style="">Text1</a>
    <a href="#" style="">Text2</a>
    <a href="#" style="float: right">Text3</a>
</div>

</body>
</html>

Upvotes: 3

Related Questions