Same height of div' s?

[eduard]

How do I get the height of my first div the same as the third div of my website www.eduardlid.web44.net? CSS: * { margin:0; padding:0; list-style-type:none; }body{ font:bold 18px arial,geneva,SunSans-Regular,sans-serif; background-color:#6495ed; }#container { min-width:966px; }#links { float:left; padding:10px 0 0 100px; font-size:12px; }#links li { margin-bottom:5px; } #links a { color:#000; } #links a:hover { color:#696969; }#flags { float:right; width:256px; height:20px; margin:10px 0px; } #flags li { position:relative; float:left; width:24px; margin:0 2px; font-size:8%; font-weight:normal; } #flags a,#flags span { position:relative; display:block; width:20px; line-height:2px; font-size:0%; font-weight:normal; } #flags span { position:absolute; top:0; left:0; width:-6px; height:24px; background-position:0 -2px; } #flags span:hover { box-shadow:#eef 0 0 0px; } #amer { background-image:url(americanflag.gif); } #spanish { background-image:url(spanishflag.gif); } #germ { background-image:url(germanflag.gif); } #dutc { background-image:url(dutchflag.gif); } #fren { background-image:url(frenchflag.gif); }#looking { min-width:958px; }#work { clear:both; float:left; margin:10px 0 10px 303px; font-size:100%; color:#fff; } #trabajo { float:right; margin:10px 303px 10px 0; font-size:100%; color:#fff; }#main { clear:both; position:relative; height:380px; background-color:#fffff0; border:4px solid #808080; }#eduard { float:left; width:285px; border-right:4px solid #808080; }#waterfall{ float:right; width:285px; border-left:4px solid #808080; }#video { display:block; width:380px; height:280px; margin:20px auto;box-shadow:5px 5px 5px #999; }#p1 { position:absolute; width:125px; font-size:90%; left:299px; bottom:10px; }#p2 { position:absolute; width:190px; font-size:90%; right:299px; bottom:10px; } #p3 { position:absolute; width:190px; font-size:90%; right:299px; bottom:10px; }#name { position:relative; font-size:50px; color:#000; text-align:center; }#copyright { position:absolute; top:40px; right:100px; font-size:10px; color:#fff; }

[davej]

You can set the height or allow the items inside the div to determine the height. http://www.w3schools.com/cssref/pr_dim_height.asp

[eduard]

You can set the height or allow the items inside the div to determine the height. http://www.w3schools..._dim_height.asp

Ok, thanks! But where in my CSS?

[thescientist]

Ok, thanks! But where in my CSS?

uh.... add the appropriate styles to the selector of the element in question.

[eduard]

uh.... add the appropriate styles to the selector of the element in question.

Thanks! ???????????????????????

[boen_robot]

At www.eduardlid.web44.net, there are only two divs (#container and #main) :huh:Or are we talking about a different page again? Could you give a link to the exact page with the problem?

[eduard]

At www.eduardlid.web44.net, there are only two divs (#container and #main) Or are we talking about a different page again? Could you give a link to the exact page with the problem?

Thanks boen_robot! No, you're totally right! However, how I get the 2 parts (the blue ones!) of the first div (container) the same?

[jeffman]

Are you trying to put #main in the vertical center of the window?

Edited January 9, 2013 by Deirdre's Dad

[boen_robot]

@Deirdre's DadYep, sounds like that's the goal.I'm not sure of a good solution, given that there are different resolutions out there, combined with the fact that if the bottom content overflows, he'd still probably want the content to appear below the fold (right Eduard)?

[xhtmlchamps1]

How do I get the height of my first div the same as the third div of my website www.eduardlid.web44.net? CSS: * { margin:0; padding:0; list-style-type:none;}body{ font:bold 18px arial,geneva,SunSans-Regular,sans-serif; background-color:#6495ed;}#container { min-width:966px;}#links { float:left; padding:10px 0 0 100px; font-size:12px;}#links li { margin-bottom:5px;}#links a { color:#000;}#links a:hover { color:#696969;}#flags { float:right; width:256px; height:20px; margin:10px 0px; } #flags li { position:relative; float:left; width:24px; margin:0 2px; font-size:8%; font-weight:normal; } #flags a,#flags span { position:relative; display:block; width:20px; line-height:2px; font-size:0%; font-weight:normal; } #flags span { position:absolute; top:0; left:0; width:-6px; height:24px; background-position:0 -2px; } #flags span:hover { box-shadow:#eef 0 0 0px; } #amer { background-image:url(americanflag.gif); } #spanish { background-image:url(spanishflag.gif); } #germ { background-image:url(germanflag.gif); } #dutc { background-image:url(dutchflag.gif); } #fren { background-image:url(frenchflag.gif); }#looking { min-width:958px;}#work { clear:both; float:left; margin:10px 0 10px 303px; font-size:100%; color:#fff;}#trabajo { float:right; margin:10px 303px 10px 0; font-size:100%; color:#fff;}#main { clear:both; position:relative; height:380px; background-color:#fffff0; border:4px solid #808080;}#eduard { float:left; width:285px; border-right:4px solid #808080;}#waterfall{ float:right; width:285px; border-left:4px solid #808080;}#video { display:block; width:380px; height:280px; margin:20px auto;box-shadow:5px 5px 5px #999;}#p1 { position:absolute; width:125px; font-size:90%; left:299px; bottom:10px;}#p2 { position:absolute; width:190px; font-size:90%; right:299px; bottom:10px;}#p3 { position:absolute; width:190px; font-size:90%; right:299px; bottom:10px;}#name { position:relative; font-size:50px; color:#000; text-align:center;}#copyright { position:absolute; top:40px; right:100px; font-size:10px; color:#fff;}

[xhtmlchamps1]

code is very good enough to under stand the concept