I can't tell why my div container has so much empty gap

As you can see, I have set borders for the divs and the problem I am having is that the container div is so big and when I try to decrease its width the divs inside mess up as in they go down and align vertically....Can you tell what the issue here is? I think it's something wrong with the content being inside "wrapper" div but I can't tell what is wrong.

As you ca开发者_JS百科n see if I zoom the logo div at top expands but why doesn't the content div expand as well?

Here is the CSS code: http://codepad.org/OhItDeVq

Lastly, the relevant HTML code: http://codepad.org/RsOOgbGI

---

Probably you need your wrapper to be a bit wider because it's to small place for menu div and content. From the second screenshot you can see that.

Maybe you need something like this:

CSS

.wrapper { width: 980px; position:relative; margin:0 auto; }
.header { background:red; clear:both; height:100px; }
.menu { width:160px; background:#ccc; float:left; height:300px; }
.content { margin-left:160px; height:400px; background:green; }

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
</div>

---

I believe it might have something to do with your table. I would highly suggest removing it and sticking with a pure <div> layout.

however, if you must use the table, maybe put a cellspacing="0" cellpadding="0" in there.

---

It looks like you set your container div to:

width: 79%

Some elements inside the container div are set for 100% so they end up being wider then the container which is why you see the extra space.

I would suggest keeping the container div to a fixed pixel width and then using either fixed or percentage widths for the internal elements. This way they will be based on the containers fixed width and always fit inside it.

Hope that helps.

---

I agree with others on this one. But it seems you are using html from another age.

Table is evil for anything else than data presentation.

This should never be used for design purpose.

I highly recommend that you learn the basics of css and then try to use a framework like http://960.gs or http://cssgrid.net/ which are both excellent for static or fluid layouts.

But again try to keep you markup as light as possible !