In the creation of my website, I have incorporated small login and logout buttons that are positioned in the top right corner. Within a "header_content" division, there is another div with a style of "float: right" to keep it aligned in the top right corner. Inside this div, there are list items containing links and forms with buttons. One element floats to the right while the other floats to the left to maintain alignment.
Most of the time, everything functions properly. However, occasionally the floats seem to conflict, causing the second link to appear misplaced. A simple page refresh resolves the issue temporarily, but the problem reoccurs sporadically, which can be frustrating.
My question is, could this be a browser-related problem (I am currently using Chrome) or is it due to having too many nested floats or some other factor?
EDIT:
Upon further examination, it seems that there are more floats than initially anticipated :D Below is a snippet of the code for better understanding (the form with the button and id=right is the one experiencing the positioning issue).
<div id="header">
<div id="header_banner">
.... content
</div>
<div id="header_content">
<div id="outer_left">
..... content
</div>
<div id="outer_right">
<li>
<a id="left" href="........."></a>
<form id="right" method="post" action="">
<div>
......
<button type="submit" value="value">Submit</button>
</div>
</form>
</li>
</div>
</div>
</div>
#header_banner, #outer_left, #left {
float: left;
.....
}
#outer_right, #outer_right li, #right {
float: right;
.....
}