StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think i misunderstood your problem, the js was not the right answer for what you want to achieve, can you try to use this css? Is very similar to yours besides 2 or 3 sections. You need to be more careful when you are using the attribute height, because that prevents the div to stretch. </p> <pre><code><style type="text/css"> @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; } html { margin: 0 auto; height: 100%; width: 100%; } body { margin: 0 auto; height: 100%; width: 100%; background-image: url(images/egg_shell.png); } /* ----------> FONTS Ids Start <---------- */ h1 { font-family: Tahoma, Geneva, sans-serif; font-size:10pt; font-weight: normal; } h2 { font-family:Tahoma, Geneva, sans-serif; font-size:10pt; direction:ltr; } h3 { font-family: Tahoma, Geneva, sans-serif; font-weight:lighter; font-size:11pt; } h4 { font-family: Tahoma, Geneva, sans-serif; font-weight:bolder; font-size:11pt; } h5 { font-family: Tahoma, Geneva, sans-serif; font-weight:lighter; font-size:10pt; } h6 { font-family: Tahoma, Geneva, sans-serif; font-weight:bold; font-size:10pt; } /* ----------> FONTS Ids End <---------- */ /* ---------> Body Starts Here <--------- */ /* ---------> Body Ends Here <--------- */ /* ---------> Header Starts Here <--------- */ #header { width:100%; height:127px; margin:0 auto; background:#e5e6e7 url('images/header_bg.gif') repeat-x; } #header-content { width:1000px; height:127px; margin:0 auto; } #logo { float: left; padding-left: 8px; padding-top: 11px; height: 94px; width: 396px; } #header-menu { float: right; width: 379px; padding-right: 7px; padding-top: 26px; height: 72px; } .nav_ul { width:500px; margin:0 auto; list-style-type:none; } .nav_ul li{ margin-right:21px; float: left; display:block; height:62px; } .nav_ul li a { background:url('images/en/nav.png') no-repeat scroll top left; width:59px; display: block; height: 62px; position: relative; } .nav_ul li a.navegator1 { width:59px; } .nav_ul li a.navegator2 { width:59px; background-position:-80px 0px; } .nav_ul li a.navegator3 { width:59px; background-position: -155px 0px; } .nav_ul li a.navegator4 { width:59px; background-position:-238px 0px; } .nav_ul li a.navegator5 { width:59px; background-position:-316px 0px; } .nav_ul a span { background:url('images/en/nav.png') no-repeat scroll bottom left; display:block; top:0; float:left; height:100%; width:100%; } .nav_ul li a.navegator1 span { background-position:0px -73px; } .nav_ul li a.navegator2 span { background-position:-80px -73px; } .nav_ul li a.navegator3 span { background-position:-155px -73px; } .nav_ul li a.navegator4 span { background-position:-238px -73px; } .nav_ul li a.navegator5 span { background-position:-316px -73px; } #text-size { height: 0; padding-left: 244px; position: absolute; top: 73px; } .font-size { width:56px; margin:0 auto; list-style-type:none; } .font-last { margin-left:17px; } .font-size li{ float: left; display:block; height:11px; } .font-size li a { background:url('images/font-size.png') no-repeat scroll top left; width:15px; display: block; height: 11px; position: relative; } .font-size li a.font-size1 { width:15px; } .font-size li a.font-size2 { width:19px; background-position:-37px 0px; } .font-size a span { background:url('images/font-size.png') no-repeat scroll bottom left; display:block; top:0; float:left; height:100%; width:100%; } .font-size li a.font-size1 span { background-position:0px -14px; } .font-size li a.font-size2 span { background-position:-37px -14px; } #Colore-change { height: 0; padding-left: 82px; position: absolute; top: 72px; } .colore-butoons { width:56px; margin:0 auto; list-style-type:none; } .color-last { margin-left:23px; } .colore-butoons li{ float: left; display:block; height:11px; } .colore-butoons li a { background:url('images/colore-buttons.png') no-repeat scroll top left; width:16px; display: block; height: 18px; position: relative; } .colore-butoons li a.colore-butoons1 { width:16px; } .colore-butoons li a.colore-butoons2 { width:16px; background-position:-40px 0px; } .colore-butoons a span { background:url('images/colore-buttons.png') no-repeat scroll bottom left; display:block; top:0; float:left; height:100%; width:100%; } .colore-butoons li a.colore-butoons1 span { background-position:0px -18px; } .colore-butoons li a.colore-butoons2 span { background-position:-40px -18px; } /* ----------> Header Ends Here <---------- */ /* ---------> Contaner Starts Here <--------- */ #main { height:auto; } #container { min-height: 20%; //height:60%; width: 1032px; margin: 0 auto 400px auto; background-color: white; background: url('images/bg.png') repeat-y; } #right-elements { padding-top: 10px; padding-left: 25px; padding-bottom: 10px; width: 209px; float: left; } #main-menu { float: left; min-height:240px; height:100%; width:202px; background: #f5f5f5 url('images/block-head.png') repeat-x; -moz-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; border-radius: 0px 15px 0px 15px; -moz-box-shadow: 0px 0px 10px #aca9b3; -webkit-box-shadow: 0px 0px 10px #aca9b3; box-shadow: 0px 0px 10px #aca9b3; } #main-menu-title { padding-top: 3px; padding-left: 5px; width: 137px; height: 23px; float: left; } #menu-text { float: left; direction: ltr; padding-top: 9px; position: relative; width: 100%; height: auto; } #menu-text ul { list-style-type:none; margin:0px; padding:0px; } #menu-text ul li { line-height:1.9em; border-top:dashed 1px #c6c6c6; padding:0px; } #menu-text ul li a { color: #0e3670; padding-left: 5px; display: block; font-size:10pt; font-family:tahoma, arial; text-decoration: none; } #menu-text ul li a:hover { color:#ffffff; padding-right:5px; background:url('images/en/menu-hover.png') no-repeat top left #31b6e5; } #menu-text ul li.menu-text-first { border-top:none; } #left-elements { float: right; --width: 798px; } #content-block { float: right; min-height:60%; --height: 100%; width: 774px; min-height: 240px; margin-right: 23px; margin-top: 10px; background: #f5f5f5 url('images/block-head.png') repeat-x; -moz-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; border-radius: 0px 15px 0px 15px; -moz-box-shadow: 0px 0px 10px #aca9b3; -webkit-box-shadow: 0px 0px 10px #aca9b3; box-shadow: 0px 0px 10px #aca9b3; } #content-title { direction: ltr; padding-top: 2px; padding-left: 5px; width: 700px; --height: 33px; float: left; } #content_text { margin-top: 3px; margin-left: 9px; float: left; direction: ltr; } /* ---------> Contaner Ends Here <--------- */ /* ---------> Fotter Stars Here <--------- */ #footer { width: 100%; height: 90px; margin: 0 auto; background: #e5e6e7 url('images/footer-img.png') repeat-x; position:fixed;bottom:0;right:0; } #footer-content { width: 1000px; height: 90px; margin: 0 auto; } #footer-logo { float: left; padding-left: 9px; padding-top: 27px; height: 51px; width: 224px; } #footer-text { width: 333px; float: right; } #copyrights { float: right; padding-right: 7px; width: 333px; height: 17px; padding-top: 21px; } #visits { float: right; color: #FFFFFF; padding-top: 4px; padding-right: 7px; } #design { float: right; color:#b3b1b1; padding-top: 4px; padding-right: 7px; } #design a { color: #FFFFFF; text-decoration: none; } /* ---------> Fotter Ends Here <--------- */ </style> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload