form is shifting my header down

0
votes

Browser: chrome

https://meocloud.pt/link/8b1b2319-7677-4c18-afd6-2d8ab48d5c63/form.JPG/

I have a contact page with a header and a footer being included_once and the content in the middle. The hearder.php as 1 div ´s float right and left (200px + 750px + margin -right:10px total 960px), the footer as one div center (960px) This content in the middle is dynamically imported into this page, with 2 div floating left and right (200px + 750px + margin -right:10px total 960px).

My problem is the following:

when I insert a form in the content page (750px - right float) it shift the all right div (750px) of the header down +/- 100px.

how can i solve this problem?

Thanks

i tried to clear:right/left/both... unfortunately does not resolve my problem :(

here is the code (thanks in advance):

http://jsfiddle.net/yXdg6/embedded/result/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home Page - MiCasa</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="box">
    <div id="header">
        <div id="header_topo">
                <a href="index.php"> <img src="assets/layout/logo/logo.jpg" alt="home" title="home" border="0" class="img_logo" />  </a>
                <ul>
                <li><a href="index.php?pg=home">Home</a></li>
                <li><a href="index.php?pg=properties">Property sell</a></li>
                <li><a href="index.php?pg=properties">Property to let</a></li>
                <li><a href="index.php?pg=rentals">Holidays rentals</a></li>
                <li><a href="index.php?pg=guide">Guide to Portugal</a></li>
                <li><a href="index.php?pg=register">Advertise</a></li>
                </ul>
        </div> <!------ close header_topo ------>

        <div id="header_navegar">

            <div id="header_navegar_central">
             <div id="header_navegar_filtro">
             <div id="q_search"></div> <!---- close q_search ---->
<h1> Find Your Home</h1> <h2> Quick Search</h2> 
<form name="filtrar_avancado" method="post" action="" >
                    <select name="tipo">
                        <option value=""> To Buy or To Rent? </option>
                        <option value=""> Properties for Sale </option>
                        <option value=""> Properties to Rent </option>
                        <option value=""> Holiday Rentals </option>
                    </select>

                    <select name="property_type">
                        <option value="" disabled="Disabled"> Select type </option>
                        <option value="" disabled="Disabled"> Apartment </option>
                        <option value="" disabled="Disabled"> Villa </option>
                        <option value="" disabled="Disabled"> Farm </option>
                        <option value="" disabled="Disabled"> Business </option>
                        <option value="" disabled="Disabled"> Townhouse </option>
                        <option value="" disabled="Disabled"> Old House </option>
                    </select>

                    <select name="area">
                        <option value="" disabled="Disabled"> Select Area </option>
                        <option value="" disabled="Disabled"> Algarve </option>
                        <option value="" disabled="Disabled"> Alentejo </option>
                        <option value="" disabled="Disabled"> Lisbon </option>
                        <option value="" disabled="Disabled"> Center </option>
                        <option value="" disabled="Disabled"> North </option>
                    </select>

                    <select name="bedrooms">
                        <option value="" disabled="Disabled"> Bedrooms </option>
                        <option value="" disabled="Disabled"> 1 room </option>
                        <option value="" disabled="Disabled"> 2 rooms </option>
                        <option value="" disabled="Disabled"> 3 rooms </option>
                        <option value="" disabled="Disabled"> 4 rooms </option>
                        <option value="" disabled="Disabled"> 5+ rooms </option>
                    </select>

                    <select name="price">
                        <option value="" disabled="Disabled"> select a price range </option>
                        <option value="" disabled="Disabled"> 0€ - 10000€ </option>
                        <option value="" disabled="Disabled"> 10001€ - 20000€ </option>
                        <option value="" disabled="Disabled"> 20001€ - 40000€ </option>
                        <option value="" disabled="Disabled"> 40001€ - 60000€ </option>
                        <option value="" disabled="Disabled"> 60001€ - 100000€ </option>
                    </select>

                    <span> Listing Count: 1256  </span>

                    <input type="submit" name="lista" value="Search" class="btn">
                    </form>

    </div><!------ close header_navegar_filtro ------>         

                <div id="header_navegar_banner">
                <img src="assets/temp/img02_b.jpg" class="banner"/>

                </div><!------ close header_navegar_banner ------>  

            </div><!------ close header_navegar_central ------>
        </div><!------ close header_navegar ------>
    </div> <!------ close header ------>
<div id="clear">
        <div id="imoveis_home">

                <div id="adverts"><h1>Advertisment </h1>
                <img src="assets/layout/list_property/List_Property_Bg_hover.jpg" class="advert"/>
    </div><!------ close adverts ------>
    <div id="facebook"><img src="assets/layout/facebook/FB_FindUsOnFacebook-114.png" class="facebook"/>
    </div> <!--- close Facebook ---->
 </div>
 </div>  <!--- close clear ----> 


<div id="pagina">
    <h1>Register</h1>

            <h2>The system of inserting your Advertizing is completly automatic. <br />
    Once your register, you will be given access to the member control panel where you will be able to:</h2>

     <h3>
     &raquo; Insert your property to let or sell!<br />
     &raquo; Edit you ongoing advert!<br />
     &raquo; Respond to messenges!<br />
     &raquo; Check your statistics!<br />
     &raquo; Process payments!<br />
     &raquo; Edit your profile!<br />
     &raquo; and much more....</h3>

     <h4>Register now and advertize you property!</h4>

     <h5>Questions? <a href="index.php?pg=contacts">Clique here!</a></h5>


   <form name="register_client" id="register_client" method="post" action="index.php?pg=register_ok" enctype="multipart/form-data">

       <fieldset><legend>Register and advertize</legend>

       <label>
          <span>Company:</span>
          <input type="text" name="company" />
        </label> 

        <label>
          <span>First Name:</span>
          <input type="text" name="first_name" />
        </label>

        <label>
          <span>Last Name:</span>
          <input type="text" name="last_name" />
        </label>

        <label>
          <span>E-mail:</span>
          <input type="text" name="email" />
        </label>

        <label>
          <span>Password:</span>
          <input type="password" name="password" />
        </label>

        <label>
          <span>Telephone:</span>
          <input type="text" name="telephone" />
        </label>


          <input type="submit" name="register" value="register" class="btn" />


       </fieldset>

     </form>


</div> <!--- close div pagina --->






        <div id="footer">
    <div class="txt" > 
    <ul>
        <li>

        <h2><a href="index.php?pg=about">About us</a></h2>
        <h3><a href="index.php?pg=news">News</a></h3>
        <h4><a href="index.php?pg=disclaimer">Terms and privacy</a></h4>
        <h5><a href="index.php?pg=contact">Contacts</a></h5>
        <h6><a href="index.php?pg=advertise">Advertise</a></h6>
        </li>
    </ul>
    </div><!------ close txt ------>
</div><!------ close footer ------>

</div><!------ close box ------>



</body>
</html>
3
phpjqueryhtmlcss-float
Do you have an example on codepen or jsfiddle that illustrates your issue? – Chris Spittles
meocloud.pt/link/8b1b2319-7677-4c18-afd6-2d8ab48d5c63/form.JPG – Likwit
Can you please paste the source markup instead of the PHP please? i.e load the page in your browser of choice and select View Source... It will make it far easier to diagnose the issue there is no markup for the header footer or nav. Making a JSfiddle or codepen would help a lot! – Chris Spittles
jsfiddle.net/yXdg6/embedded/result – Likwit
jsfiddle.net/Likwit/cCDwR – Likwit

3 Answers

0
votes

Try 

clear: both;

or

clear: left;

or

clear: right;

Further Information: http://www.w3schools.com/cssref/pr_class_clear.asp

You could also help us solving your problem, if you could post your code!

0
votes

Change value of

 #header_topo ul{
   margin:65px 0 0 0;
  }

to

 #header_topo ul{
   margin:0;
  }

It will work

0
votes

I can't replicate your issue in Chrome, but in my opinion your markup is a convoluted and your CSS is bloated and inflexible.

I therefore suggest a change of thinking regarding your design. Instead of rigidly setting fixed heights on everything, let the content flow:

This will make it easier to edit or make it responsive in the future as well:

/* ------- Content Container */

.contentContainer {
  width: 960px;
  margin: 0 auto;
}
/* ------- Aside */

.contentContainer .aside {
  width: 200px;
  float: left;
}
.contentContainer .aside .findHome {
  margin-bottom: 10px;
  background: #f00;
  border-radius: 5px;
}
.contentContainer .aside .advertisements {
  background: #f00;
  border-radius: 5px;
}
/* ------- Content */

.contentContainer .content {
  margin-left: 210px;
}
/* ------- Navigation */

.navigation {
  list-style: none;
  background: #014F66;
  padding: 10px;
  margin: 0 0 10px;
  border-radius: 5px;
}
.navigation li {
  display: inline;
}
.navigation li a {
  color: #fff;
}
/* ------- Hero Container */

.heroContainer {
  margin-bottom: 10px;
}
.heroContainer .hero {
  max-width: 100%;
  border-radius: 5px;
  display: block;
}
/* ------- Registration Panel */

.registration {
  border-radius: 5px;
  border: solid 1px #ccc;
  padding: 20px;
}
<div class="contentContainer">
  <div class="aside">

    <div class="findHome">

      Find Your Home
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>

    </div>

    <div class="advertisements">

      Advertisements
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>

    </div>

  </div>
  <div class="content">

    <ul class="navigation">
      <li><a href="">Home</a>
      </li>
      <li><a href="">Sell Property</a>
      </li>
      <li><a href="">Let Property</a>
      </li>
      <li><a href="">Holiday Rentals</a>
      </li>
      <li><a href="">Guide to Portugal</a>
      </li>
      <li><a href="">Advertise</a>
      </li>
    </ul>

    <div class="heroContainer">
      <img class="hero" src="http://www.arts-wallpapers.com/art-wallpaper-org/panoramic-hd-wallpapers/images/2.jpg">
    </div>

    <div class="registration">

      <h1>Register</h1>

    </div>
  </div>
</div>