Jump to content
eduard

Same height of div' s?

Recommended Posts

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; }

Share this post


Link to post
Share on other sites
Ok, thanks! But where in my CSS?
uh.... add the appropriate styles to the selector of the element in question.

Share this post


Link to post
Share on other sites
uh.... add the appropriate styles to the selector of the element in question.
Thanks! ???????????????????????

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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?
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?

Share this post


Link to post
Share on other sites

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

Edited by Deirdre's Dad

Share this post


Link to post
Share on other sites

@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)?

Share this post


Link to post
Share on other sites
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;}

Share this post


Link to post
Share on other sites

code is very good enough to under stand the concept

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...