Question

Longtime Java programmer, pretty new to CSS/HTML in general. Here is my portfolio site I am working on.

http://www.zdware.com/projects.html

Going to it with a non-large browser window forces my content to spill into another div. Currently, I added some padding to it, so its not exactly spilling, but now the content is pushed down (for some odd reason, even though there seems to be space.

I am using a few “hackish” things to sort of like :

margin-bottom: -10000px;
padding-bottom: 10000px;

for my two “columns” in the middle. Would this have anything to do with it?

The two columns I have are effected by this.

.sidebar1 {
    float: left;
    min-height: 100%;
    min-width:250px;
    width: 20%;
    background-color:gray;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
.content {
    padding: 10px 0;
    width: 80%;
    float:right;
}

.content section{
    padding-left:30px;
}

I’ve tried adding min-width to .content, but it doesn’t really do anything. I do have rather bigger images on the pages, but they should still fit.

To elaborate visually..

My preferred way I would like this to work is for the non “container” sections (which holds both the sidebar and content tags) to be shortened, instead of the container.

I also feel like this is a common problem. However, dealing with the way CSS is, I feel if I implemented someone else’s solution (based upon their own problem) that another piece of code would end up preventing it from working.

Answer 1

The min-width: 250px; rule on .sidebar1 is what’s causing the .content div to position itself beneath the sidebar. If you get rid of that, then your content column moves itself into the right position.

As for what to do with the logo, I’d either bump it down so that it fits in that space, or set it to have a percentage width in the css so it always fits in that column regardless of how wide the column is.

And yeah, I’d lose the 10000px negative-margin hack.