Weird behaviour with html float

StackOverflow https://stackoverflow.com/questions/8828092

  •  27-10-2019
  •  | 
  •  

Question

I can't understand how to solve this. I'm trying to insert my search form in a page written by someone else and it overlaps.

This is the wrong version. As you can see, it has a weird behaviour.

http://jsfiddle.net/ecFWr/2/

This is the relevant bit of code

<div style="width: 400px; float:right">
        <link rel="stylesheet" type="text/css" href="/css/search.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.color.js"></script>
        <script type="text/javascript" src="/js/search.js"></script>
        <link rel="stylesheet" href="/css/search.css">
        <form id="searchForm" action="/tags/search">
            <fieldset style="border:0px; padding:0px">
                <div class="input">
                    <input type="text" name="s" id="s" value="Cerca...">
                </div>
                <div>
                    <input type="submit" id="searchSubmit" value="">
                </div>
            </fieldset>
            <input type="hidden" name="owner_id" id="owner_id" value="1">
        </form>
        <div>
            <fieldset>
                <legend style="padding:0;">
                <span style="display:none;">
                Documento di sintesi &nbsp;<a href="javascript:;" title="TOGGLE_RESOURCE" onclick="jQuery_1_4_x('#wiki').toggle(!jQuery_1_4_x('#wiki').is(':visible'));"><img src="/img/icons/zoom.png" alt="show">Mostra/Nascondi</a>
                </span>
                </legend>
                0 documenti di sintesi presenti<br>
                <a href="/wikitool/create/Infodisc/1"><img src="/img/icons/page_add.png" style="border: 0px; margin-bottom: -3px;" class="pngfix" alt=""> Crea un documento di sintesi</a>
                <div id="wiki" style="display: none;">
                </div>
            </fieldset>
        </div>

If i use

<div style="width: 400px;">

instead of

<div style="width: 400px; float:right">

i get this

wrong floating

what i'm doing wrong?

I can post the whole page if needed.

Was it helpful?

Solution

If you just want to place your search area on the right side without overlapping, you can keep your div float to the right, and make the div below it float to the left, like this:

<div style="width: 400px; float: right;">
  ... your div
<div>
<div style="width: 100%; float:left;">
  ... div immediately below
<div>

Updated version: http://jsfiddle.net/ecFWr/4/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top