CODEWITHSUNDEEP
phpcsswordpress
Mike Thompson
Mike Thompson

Reputation: 19

Can anyone tell me which piece of my CSS is causing a gap?

Within my Wordpress site I have a custom written PHP search. It appears within the Content section of specific pages via 'include' so it's a separate file.

http://www.glutenfreeireland.com/accommodation/find-accommodation/

The entire code for search and results appear within the DIV .wheretoeatsearchwrapper. Unfortunately a large gap appears between the text "Step 1: Choose a Location:" and the first SELECT box. It is caused by the adverts on the right, which when removed, fix the problem. I understood the class wheretoeatsearchwrapper kept everything within that DIV, i.e. objects either side of wheretoeatsearchwrapper wouldn't affect content inside it?

This is the applicable CSS:


    .wheretoeatsearchwrapper {
        /*max-width: 490px;*/
        clear: none;
        margin: 0;
        padding-left: 10px; 
    }
    .wheretoeatsearchwrapper h1,h2,h3,h4,h5,h6 {
      display: inline;
    }
    .searchlocation select {
      font-size: 95%;
      margin: 0.2em;
      float: left;
      clear: both;  
    }
    .steps {
      color: #339933;
      font-weight: bold;    
    }
    .searchvenuetype {
      font-size: 95%;
      margin: 4px;
      float: left;
      clear: none;
    }

Upvotes: 0

Views: 80

Answers (2)

Legionar
Legionar

Reputation: 7597

Remove clear: both for .searchlocation select

.searchlocation select {
  font-size: 95%;
  margin: 0.2em;
  float: left;
  /*clear: both;*/
}

Upvotes: 0

Karl
Karl

Reputation: 5463

It's the clear:both; on the searchlocation select element.

.searchlocation select {
    font-size: 95%;
    margin: 0.2em;
    float: left;
    clear: both; // Remove this
}

Upvotes: 1

Related Questions