View Full Version : Resolved float:right not floating all the way right?

05-12-2011, 04:32 AM
:thumbsup:everything else in my content box seems to understand the width of the content box and aligns correctly. but one element i have set a "float:right;" to refuses to float to the absolute right edge of my content box.

i am probably overlooking something VERY minor, my brain is so fried on this!

here is a diagram:



05-12-2011, 04:41 AM
You might have a right margin set on that element stopping it from floating all the way to the right.

05-12-2011, 04:48 AM
thanks for your reply!
i can't seem to locate a right-margin on that element, let alone one wide enough to interfere with the float like that, though.


05-12-2011, 05:41 AM
Hello blinky,
Wrapping that ul in an unnamed inline styled div and pulling it back up level with your h3 with a negative margin may not be the most semantic way to accomplish that.

Maybe try something like this instead -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #fc3;}
#wrapper {
margin: 0 auto;
max-width: 900px;
padding: 0;
width: 100%;
overflow: auto;
background: #fff;
#label {
margin: 50px 0 100px;
overflow: auto;
background: #ccc;
h3 {float: left;}
ul.subcategories {float: right;}
ul.subcategories li {
float: left;
margin: 0 20px 0 0;
list-style: none;

<div id="wrapper">
<div id="label">
<h3>Cruce Signati</h3>
<ul class="subcategories">
<li>Black Label</li>
<li><a href="http://www.doesnotequal.com.au/shop/category/cruce-signati/white-label/">White Label</a></li>
<!--end label--></div>
<!--end wrapper--></div>

05-12-2011, 06:44 AM
thanks for your reply! i tried the code you recommended in my style sheet and removed the element style from the div.

as this is wordpress i can't set up the page exactly how you've suggested as a lot of it is generated with php.

the code i have put into the style sheet doesn't seem to have worked, the menu is now back to where it was before, kind of hanging low and still not floating right.

but i agree that the element style was a poor choice so have gone without that for now.

05-12-2011, 07:21 AM
ul.categories is bumped over by the unnamed div that contains your search form.

To show that, remove the top: -82px; from the inline styling on your forms container and you can see it slide down and fill the space to the right of ul.categories.

Wordpress and php or not, you're going to need to learn to use floats to position elements side by side.

05-12-2011, 08:09 AM
Thanks Excavator I see what you mean.

So if I want both of these elements floating right, how can I apply this to the search form? too? I tried applying a class to the div containing the search form to specificy a right float and now it's misaligned again.

I am finding it so confusing for something that seems like it should be so simple!

05-12-2011, 02:20 PM
Nevermind I have fixed it now I just needed to re-arrange the elements! Thanks :)