View Full Version : Need help with css design - 100% column height?

11-27-2005, 01:28 PM

I recenlty decided (was taking this decision now for too long i guess) to start designing pages strictly with css.. I finnaly started, but have allready come to some problems. :)

Can anyone please check the and tell me if i started it ok?

My first problem is i can't stretch the left RED-BLACK gradient "column" to be stretch down so it actually connect with red footer.. What is my mistake there..
Did i start with right sheme in my mind? Did i make allready some big mistakes in css design ?

please help.. i don't wan't to be forced to go back to tables. i hate them allready and im a newbie with css designing.. ;)


11-27-2005, 03:27 PM
Looks to be a good start. :)

You need to use a technique called Faux Columns (http://www.alistapart.com/articles/fauxcolumns/) to make the black section on the left stretch down.

11-27-2005, 03:46 PM
tnx ! :) this was also my "last" chance to fix this issue.. but i wanted to know if there is another way of fixing this.. so i will simply implement this black part in my main background (which now creates those shadows).. Are my other css elements floated and positioned rightor did u see any mistakes?

tnx for answering!

ps.: im starting to love this css.. creating pages was getting borring to me, im so happy i finally started with css only. gives the designing a bit of thinking! ;-)


11-27-2005, 04:01 PM
Nope everything looks ok to me.

You might want to neaten up the HTML slightly though so it's easier to read through? eg. Instead of this -

<p>Ločljivost senzorja : 4.1 mio točk</p>
<p>Optični zoom objektiv : 3x optični zoom</p>

Have this?

<li>Ločljivost senzorja : 4.1 mio točk</li>
<li>Optični zoom objektiv : 3x optični zoom</li>

You shouldn't really have <p> tag in <li>'s anyway... and this shouldn't really be in there -


If you want to create spaces use margins in CSS.

CSS looks ok as well though mostly - I prefer to set mine out like -

#head {
width: 780px;
margin: 0 auto;
padding: 0;
text-align: left;

Instead of -

#head {width:780px;margin:0 auto;padding:0;text-align:left;}

But that's a personal preference really.

You could shorten the #FFFFFF values to #FFF and #000000 to #000.

That's all really! :) Keep going, I'm sure the end result will be great.

11-27-2005, 04:30 PM
man tnx a lot! u cant imagine how happy i am that someone even take this time nowadays to keep helping others! i really appriciate it, thank you! about html tags's.. i just c/p some text, didnt yet clean out the code.. since i was testing my css design layout. will take your notes in mind when i get back to adding page content.

I have another question ready ;-)

My footer.. i managed to position it at the bottom of page, no matter on height of #content div.. but, there is ALLWAYS scroller.. it scrolls as much as footer is big? Do you see any mistakes, or do you have any other footer ideas how to dont have this scroller? I have checked the footer section on ALA but didnt find any better solution thought. I have tryed with css+js, but i dont like to handle with js anymore!

tnx again!

11-27-2005, 05:23 PM
I kind of see your problem, you want the footer to appear at the bottom of the page? Not half way down so to speak?

Your menu has gone funny now also - is coming out of the container.

11-27-2005, 07:39 PM
uf, i see it. i forgot to check in IE.. let me fix and i explain you my problem than. :) brb

11-27-2005, 10:03 PM
ok.. i fixed the thing..

on there should be now an ok version..

now, the problem is, i cannot position the MENU ( <div id="head_menucontainer"> menu menu menu menu </div>) to be where i want.. let's say i want it to be on the RED tape.. .

if i position it inside the <div id="headozadje"> (which holds the gfx for head) .. how can i tell him than that i want it to be let's say 50px from the TOP of the #headozadje ... i think absolute / relative position takes matter only if i have an absolute/relative positioned DIV anywhere.. but i dont.. so it would take browser window for positioning..?

i tryed with


which is all ok in mozzila/firefox.. but as soon i DO add position:relative; and try to publish the page in IE.. menue just dissapears..

tnx for all help!