Weird behavior with heights

Adrian

unread,

Oct 28, 2009, 10:54:23 PM10/28/09

to Elastic CSS Framework

I am testing Elastic with a new theme I'm making and got some odd
behavior with this code

html:

<body class="unit on-3 columns">
<div class="fixed column" style="width: 200pt;">
<div id="logo" class="container"><img src="img/logo2.png"
alt="Logo" id="logo" /></div>
</div>
<div class="elastic column">
<div id="content" class="container box"> </div>
</div>
<div class="fixed column" style="width: 200pt;">
<div id="right_nav" class="container box"> </div>
</div>
</body>

css:

body {
background: #2d335e url(../img/Aurora.png) top center repeat-x;
}

.box {
background: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
border: #FFF double 6px;
}

#content {
position:relative;
text-align: left;
margin-top: 15pt;
}

#right_nav {
position: relative;
height: 300pt;
text-align: left;
margin-top: 15pt;
}

Well this caused on Firefox 3.0.14 to only paint half the background
with the color I assigned on the CSS. I had to add html { height:
100% } to my style sheet and the full-height class from elastic to the
body tag in order for it to paint the whole background with the color.

Sergio de la Garza

unread,

Oct 29, 2009, 12:50:07 PM10/29/09

to Elastic CSS Framework

Hello Adrian

Try something like this:

html, body {

background: #2d335e url(../img/Aurora.png) top center repeat-
x;

}

</div>
</body>

That happened because thats the default behavior of body tag, you
should not apply that classes to the body tag, use a div instead also
you need to add html to the css body rule too.

Hope that help.

Cheers.

Adrian

unread,

Nov 1, 2009, 6:52:07 PM11/1/09

to Elastic CSS Framework

Thanks Sergio, I'll give that a try. I was using a div before and it
was doing the same. However I was not aware that html had to be added
to the body rule also. Heck I didn't know html could have CSS rules
applied to it.

On Oct 29, 11:50 am, Sergio de la Garza <sergio.delaga...@gmail.com>
wrote:

Sergio de la Garza

unread,

Nov 2, 2009, 12:07:29 PM11/2/09

to Elastic CSS Framework

Also you could try with:

<body>
<div class="unit full-height main-content">
xxxxxx
</div>
</body>

And apply the background rules to div.main-content since is full width
and full height it should fill the whole screen.

cheers.

Reply all

Reply to author

Forward