Question

I need some help sorting out a CSS issue with my website, I have tried everything I can think of but none worked the way that I wanted.

You can view the issue I have here: http://dev.michaelcarrano.com/blog.html

You will notice the tabs are floating instead of being connected to the content part below it.

Here is a link to the CSS file: dev.michaelcarrano.com/css/general.css

Any help?

Answer 1

OK, so a number of changes should be made. The main problem is your <span class="clear"></span> is actually taking up vertical space.

So, first delete <span class="clear"></span> entirely so your HTML should be:

<ul class="menu"> ... </ul>
<div class="content"> ...

Next, in your CSS, add these rules (You should add them in the existing blocks if they exist):

div.content {
  clear: left
}

ul.menu {
  position: relative;
  float: left;
  width: 100%
}

#container #search {
  float: none;
  position: absolute;
  right: 0;
  bottom: 0;
}