Jump to content

Recommended Posts

The following page displays just fine, so long as the text doesn't go past the bottom of the viewable part of the page. Once there's enough text to stretch beyond the viewable page, scrolling reveals the background had disappeared.

 

I've tried height:100% and min-height:100% without affect. Any ideas?

 

<!doctype...
<html>
<head>
<style type="text/css">
body,html {
height:100%;
}
#main_content {
height:100%;
width:800px;
background:url(images/bgimage.gif) repeat-y;
margin:auto;
}
#left_column {
height:100%;
width:200px;
float:left;
}
#right_column {
height:100%;
width:600px;
float:right;
}
</style>
</head>
<body>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column">Lorem Ipsum</div>
</div>
</body>
</html>

 

here you go buddy no need to set the height I just use the clear break check out the css and

<br class="clear" /> to see what i mean

<html>
<head>
<style type="text/css">
body,html {

}
#main_content {

width:800px;
background:url(images/bgimage.gif) repeat-y;
margin:auto;
}
#left_column {

width:200px;
float:left;
}
#right_column {

width:600px;
float:right;
}
br.clear{
clear:both;
}
</style>
</head>
<body>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column">Lorem Ipsum</div>
<br class="clear" />
</div>
</body>
</html>

It really didn't help, but I figured out a different way to do it. Basically, I applied the a centered background to the html body. The other divs were not moved. The background repeated properly across the entire page, regardless of div containers, so all works fine now.

 

Thanks for the attention.

 

<!doctype...
<html>
<head>
<style type="text/css">
body,html {
height:100%;
margin:0;
background:url(images/bgimage.gif) repeat-y top center;
}
#main_content {
height:100%;
width:800px;
margin:auto;
}
#left_column {
height:100%;
width:200px;
float:left;
}
#right_column {
height:100%;
width:600px;
float:right;
}
</style>
</head>
<body>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column">Lorem Ipsum</div>
</div>
</body>
</html>

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.