I've been driving myself to Arkham Asylum status all day long trying to puzzle out why my divs on top of this website aren't working properly

touchoflunacy.com

The divs which contain the hyperlinks and also the search aren't arranging properly. I attempted the typical suspects like adding a 20px border in various colors round the divs within the header to recognize which must be edited, however the edges do not show up so something is overriding them but for the existence of me I can not evaluate which.

I additionally attempted adding overflow:hidden to any or all the sun and rain within the header (div#search div#header div#mind bar etc. . . ) and additionally the #body element and also the #wrapper to no effect.

I'm a newcomer to css therefore if anybody will easily notice me which element to alter and things i would use I'll appreciate it with eternal gratitude along with a definite election for the best answer(s)!

Thanks!

Perhaps you have attempted checking the sun and rain within the Chrome dev tools or Firebug? Doing that will highlight all of the CSS styles presently being applied, and enables you to definitely edit them instantly to determine what changes you have to make.

To examine perfect-click the element/area under consideration and choose inspect element.

To make certain the edges you're setting are turning up, try setting these to !important. That ought to help you debug the problem.

div {
    border: 1px solid #F00 !important;
}

The very first factor which i observed is you are floating your divs. I've ought to luck using positioning to place divs where I'd like these to go. Here's some example code (normally styling could be in css file)

<div style="position:relative;width:500px;height:28px;"><!-- Wrapper -->
 <div style="position:abolute;top:0;left:0;width:100px;">CONTENT</div> <!--first div located top left -->
 <div style="position:abolute;top:0;left:400px;width:100px;">CONTENT</div> <!--second div located top right -->
</div>

This can permit you to set up the divs for your exact layout.

These men are correct, you have to learn how to use Firebug! It'll help you save hrs of your time.

For exmaple with ten seconds in firebug I can tell that altering your CSS file situated here /wordpress-content/w3tc/min/e4c7880c.00cd94.css at Line 2095 towards the margin-top:14px to 0px can get your research box to become inline with navigation menu.

I'd also take away the obvious:both in the search element. It does not require it from what I can tell. Rather I'd add the obvious:both around Line 2054 to #inner to help keep the following horizontal div from overlapping your sailed header elements.

Then I'd take away the -22px top in the "#header #inner #logo design a" element at Line 2062 because it causes more overlapping issues. Rather than the negative top, I'd adjust the peak from the logo design element to fit your graphics file. So at line 2058 I'd alter the height:99px to become height:122px the correct height for the logo design. (Either that or re-size your logo design to become 99px tall).

There you've, I examined many of these changes in your site accept Firebug!