Whats wrong on this CSS? that does not goes 100% when more content is added?

Question

I have 2 columns and they work just fine, the problem is that when I add more content it stays the same and the columns just don't align properly.

This is without too much content: http://clients.latamig.com/genomalab/index.html

Now when I add more content it looks like this: http://clients.latamig.com/genomalab/index2.html

I'd like a CSS solution. Thanks in advance for your kind help.

Think about your height value. 100%. 100% of what? When you put a width value of 100%, what is it 100% of? the content in the container? or the container that the element is in? — Justin L., Jun 20 '13 at 08:03

score 4 · Answer 1 · answered Jun 20 '13 at 08:04

4

You have to remove your height: 100% It is 100% of the window, not the document.

Instead put min-height: 100%

answered Jun 20 '13 at 08:04

PeterFour

329
4
16

I fixed that. But now the menu wont go 100% full height. Any ideas? Thank you. – Eddwin Paz Jun 20 '13 at 08:47
IF you see the site again the index2.html you will see what i mean. – Eddwin Paz Jun 20 '13 at 08:54
Hum good question, I don't know if there is a CSS solution. You can try a little hack by setting the background color to your .wrapper. And by changing little things to make it clean – PeterFour Jun 20 '13 at 09:18
Or also add a wrapper for your two columns to set background on this div – PeterFour Jun 20 '13 at 09:19
By the way i used it on my design and its perfect, the problem is that on IE it just does not work :( any ideas how to make it look properly like on Google Chrome or Firefox? – Eddwin Paz Jun 21 '13 at 19:55

lukeocom · Accepted Answer · 2013-06-21T01:13:57.013

0

You might like to post your relevant css and html. There are a few possible solutions. You can set a min-height for your container. And allow it to expand to a set max-height. You could set an overflow-y value of auto for the container to allow the user to scroll down to view the extra content...

#yourContainer{
    min-height:800px;
    max-height:1200px;
    overflow-y:auto;
}

here's an example pen - http://codepen.io/lukeocom/pen/KqAfG

edited Jun 21 '13 at 01:13

answered Jun 20 '13 at 08:05

lukeocom

3,243
3
18
30

lukeocom thank you. you've saved my life :) – Eddwin Paz Jun 21 '13 at 02:48

score 0 · Answer 3 · answered Jun 20 '13 at 08:06

0

you should give a solution of max-height: 00px; in CSS. It would always give the same height, no matter what

answered Jun 20 '13 at 08:06

Ryan de Vries

676
4
13

score 0 · Answer 4 · edited Jul 12 '13 at 04:14

0

You can make your min-height 100% and the max-height auto;

edited Jul 12 '13 at 04:14

icodebuster

8,890
7
62
65

answered Jun 20 '13 at 08:09

Whats wrong on this CSS? that does not goes 100% when more content is added?

4 Answers4