...

View Full Version : Why does float right cause a line break?



IanIan
11-03-2011, 08:40 AM
Hi there,

I'm getting a line break before the <ul>. I want it to be on the same line as the link on the left.



<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main">

<div id="imageNavigation">
<div id="viewAllContainer">
<a href="/archives/selector.aspx?page=0">VIEW ALL (174)</a>
</div>
<ul style="float:right;"><li style="display: inline;">1</li><li style="display: inline;">2</li></ul>
</div>

</div>
</body>
</html>


Any ideas?

Cheers, Ian.

Excavator
11-03-2011, 10:32 AM
Hello IanIan,
It's not really a line break. You have your View All link it it's own div. To see what's really going on, give #viewALLContainer a background color.

Try it like this once instead -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#imageNavigation {background: #ccc;}
ul {margin: 0;float: right;}
li {display: inline;}
</style>
</head>
<body>
<div id="main">
<div id="imageNavigation">
<a href="/archives/selector.aspx?page=0">VIEW ALL (174)</a>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
</html>


note, that margin: 0; is needed to remove the default 16px top and bottom margin on ul.

IanIan
11-03-2011, 10:55 AM
Soz... I was actually floating #imageNavigation left so that wasn't an issue.

Setting the margin on the ul fixed it! Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum