Jump to content

'stretch' an empty div from the top to the very bottom of the page


annarti

Recommended Posts

Hi all!

 

I'm not entirely certain I've got this post in the right forum, since I suspect the solution will be javascript rather than css, but the problem is with the css so I figured I'd start here.

 

I've done extensive Googling for this problem and still come up blank, so any help anyone can give would be much appreciated! I have a div empty of everything except a repeated background image that I would like stretching from almost the top of the page (90px down) right to the very bottom. Obviously, making the height:100%; only stretches to the bottom of the browser window. If the content makes the page scroll, the div doesn't go any further down.

 

I'm hoping for a css solution to this, but after searching and finding that's probably not possible, I'm willing to go with a javascript or jQuery solution, or php if that would help? I'm brand new to these languages so please be gentle!

 

The html:

<!DOCTYPE html><html><head>  <link href="main.css" rel="stylesheet" type="text/css">  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head><body><header id="top-trim"></header><header id="main-header"></header></body></html>

The css (that matters):

body{	font-family: conquerorsans, Tahoma, verdana, sans-serif;	font-size: 18pt;	color: #9e8166;	letter-spacing:2px;	background-color: #e6e0d5;	background-image:url(images/layout/whitepaper.jpg);	background-position:0px 0px;	background-repeat:repeat;}#top-trim{	position:absolute;	left:90px;	top:0px;	height:20px;	width:550px;	background-image:url(images/layout/brownpaper.jpg);}#main-header{	position:absolute;	left:90px;	top:90px;	bottom:0px;	margin-bottom:0px;	width:550px;	min-height:100%;	display:table-cell;	background-image:url(images/layout/brownpaper.jpg);}

And the full page is here. The cheating column idea (using a background image with the column in it) won't work for this unfortunately, since the page is planned to be side-scrolling and would therefore require a background image several thousand pixels long to stop the column from repeating and that would be hellishly load-time-heavy. I'd also prefer not to just specify that the div be 10000px high and scroll the thing on forever, because that's just untidy and lazy.

Link to comment
Share on other sites

Like this?

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            html, body {height:100%; margin:0; padding:0;}            #wrapper {min-height: 100%; background: yellow url('../images/10pat.jpg') 0 0px; overflow:hidden;}            #spacer {height:90px; background-color: #fff;}        </style>    </head>    <body>        <div id="wrapper">            <div id="spacer"></div>            <p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p><p>TODO write content</p>        </div>    </body></html>

with the paragraphs removed it won't be less than the full height of browser window. content going beyond browser window height will make wrapper container match that height.

Edited by dsonesuk
Link to comment
Share on other sites

The solution (for me personally) was this:

<div id="wrapper" align="top" height="auto" width="<!-- User set --!>"><div id="spacer">.......</div>.... ETC.THE RESULT OF THAT IS AN AUTO SET HEIGHT THAT WILL ADJUST ACCORDING TO THE AMOUNTOF FIELDS SET INTO THE DOCUMENT/DIV SECTION
Edited by Ethandvv
Link to comment
Share on other sites

Not quite what I'm after, no, maybe I'm not explaining myself clearly. Here have a visual aid!

 

emptydiv.jpg

 

So it's the brown div on the left that's giving issues. It's completely empty, purely decorative, with nothing in it but the background. The pink ones are fine, they do exactly what I tell them. The brown one will only extend beyond the edge of the browser window if I specify exact pixel height, but because the pink divs are flexible in height (some pages of the website extend 200px beyond the window edge, some extend by 2000+) I don't want to specify that the brown div be x-thousand pixels high because that's just untidy, lazy coding.

 

The patterns on both the main background and the brown div mean that making a faux column with the brown as part of the background wouldn't work, either, because that background image would need to be at least 10,000px wide to cover the full width of the page, which would cause serious issues with load time.

 

Can this even be done?

Link to comment
Share on other sites

With the example i gave, you guarantee the height of wrapper will not go below 100% height, then all you do is add a absolute container position where you require it, with background image within that container which height is to #wrapper and its content.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            html, body {height:100%; margin:0; padding:0;}            body {background-image: url('http://bloogum.net/wp_testing/images/layout/whitepaper.jpg');                  color: #9E8166;                  font-family: conquerorsans,Tahoma,verdana,sans-serif;                  font-size: 18pt;                  letter-spacing: 2px;            }            #wrapper{min-height:100%; position: relative; overflow:hidden;}            p {                line-height: 22pt;                text-align: justify;                width: 100%;            }            #main-header {width: 550px; position: relative; margin-left:90px;text-align: center; float:left; }            .full_height_bg_col {                background-image: url('http://bloogum.net/wp_testing/images/layout/brownpaper.jpg');                bottom: 20px;                left: 0;                position: absolute;                top: 90px;                border-radius: 12px;                width:550px;                margin-left: 90px;            }            #main-header div.bg {padding-bottom: 1em;}            #head-pic {                margin-top: 120px;            }            #pg-desc {                margin:0 auto;                width: 390px;                padding-bottom: 1em;            }            #pg-desc p {                color: #000000;                font-size: 20pt;            }            em {                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: smaller;                font-style: normal;                letter-spacing: 0;            }            .otherboxes {width:200px; border:1px solid fuchsia; margin:90px 30px 0; float:left;}            .height1 {min-height: 200px;}            .height2 {min-height: 2000px;}            #main {                margin-left: 660px; overflow:hidden;            }            .height2:hover {min-height:600px;}        </style>    </head>    <body><div id="wrapper"><div class='full_height_bg_col'></div>            <header id="main-header">                <img src="http://bloogum.net/wp_testing/images/layout/ychead.png" alt="" id="head-pic">                <div id="pg-desc">                    <p>The generic term I'm using for all the stories set in Tsyllaes, the <em>Yrae Chronicles</em>. The ones listed here are the longer stories, several chapters long. All the minifics, usually less than a thousand words, can be found <a href="http://yrae.livejournal.com">here</a>.                    </p>                </div>            </header>             <div id="main">                <div class="otherboxes height1"></div>                <div class="otherboxes height2"></div>            </div>        </div>    </body></html>
Link to comment
Share on other sites

pretty much all the divs on that page is using absolute positioning, this takes them out of the body tag. as such body has 0px in height (since nothing is 'actually' in the tag). so you can't simply use css to apply yet another div fill the dimensions of the actual page. either use javascript to find the article with the highest height and apply it to your wrapper, or change your site so that your articles don't use absolute positioning (maybe wrap all articles in a div and use relative positioning and inside floating).

Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>column 1 is 100%</title><style>*{margin:0;padding:0;}html,body{ /* this is absolutely required to allow 100% height to be available */height:100%;}#div1{position:fixed;top:0;bottom:0;width:200px;background-color:#aaa;text-align:center;}#div2{float:left;height:1500px;margin-left:210px;width:200px;background-color:#aaa;margin-right:10px;text-align:center;}#div3{float:left;height:300px;width:200px;background-color:#aaa;text-align:center;}</style></head><body><div id="div1"><p>1</p></div><div id="div2"><p>2</p></div><div id="div3"><p>3</p></div></body></html>
Edited by davej
Link to comment
Share on other sites

You are repeating the same problem he is trying to overcome, height 100% forces column 1 to the height of browser window, if column 2 or 3 content height extends beyond that browser height window, column 1 remains the same and does NOT extend to match height of column 2 or 3, which is what he wants.

Link to comment
Share on other sites

IF he is happy with menu, and content permanently fix to top left, IF it is part of this column, hard to say then it is an option the best i can come up with is

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {                var column_count = 0;                var entry_width, mainheader_width;                entry_width=$('.entry').outerWidth(true);                mainheader_width=$('#main-header').outerWidth(true);                $('.entry').each(function() {                    column_count++;                    //alert($(this).outerWidth(true)+" : "+column_count );                });                //alert(column_count)                $('body,html, #wrapper').css({'width': ((column_count * entry_width) + mainheader_width)+60});            });        </script>        <style type="text/css">            html, body { margin:0; padding:0;height: 100%; width:100%; overflow-x: visible;}            body {background-image: url('http://bloogum.net/wp_testing/images/layout/whitepaper.jpg');                  color: #9E8166;                  font-family: conquerorsans,Tahoma,verdana,sans-serif;                  font-size: 18pt;                  letter-spacing: 2px;                  overflow-x:auto;            }            #wrapper{min-height:100%; position: relative; overflow-x: visible;                     min-width:100%;            }            p {                line-height: 22pt;                text-align: justify;                width: 100%;            }            a {                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: smaller;                font-weight: normal;            }            a:link {                color: #000000;                text-decoration: none;            }            .thumbnail {                box-shadow: 0 0 10px 0 #000000;                float: left;            }            #main-header {width: 550px; position: relative; margin-left:90px;text-align: center; float:left; }            .full_height_bg_col {                background-image: url('http://bloogum.net/wp_testing/images/layout/brownpaper.jpg');                bottom: -2em;                left: 0;                position: absolute;                top: 90px;                border-radius: 12px;                width:550px;                margin-left: 90px;            }            #main-header div.bg {padding-bottom: 1em;}            #head-pic {                margin-top: 120px;            }            #pg-desc {                margin:0 auto;                width: 390px;                padding-bottom: 1em;            }            #pg-desc p {                color: #000000;                font-size: 20pt;            }            em {                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: smaller;                font-style: normal;                letter-spacing: 0;            }            #main {                margin-left: 680px; overflow-x:visible;            }            #entrystatic {                /*height: inherit; does not work for older versions of IE */                /*position: absolute; NO NO                top: 150px;*/            }            .entry {                padding-right: 95px;                width: 735px;                overflow:hidden;                float:left;            }            .thumbnail {    box-shadow: 0 0 10px 0 #000000;                            float: left;                            margin-top: 150px;            }            .entrybg, .gallerybg {                /*display:none;                height: 395px;                margin-bottom: auto;                position: relative;                top: -125px;                width: 395px;*/                width:450px;                margin-left: 285px;                background: url("http://bloogum.net/wp_testing/images/layout/circle.png") no-repeat scroll center 25px transparent;                overflow: hidden;            }            .story {                /* left: 275px;                 position: relative;                 top: -395px;*/                margin-top:150px;                width: 450px;            }            .story h1 {                border-bottom: 1px solid #000000;                border-top: 1px solid #000000;                color: #000000;                font-family: conquerorcarved,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: 35pt;                letter-spacing: 4px;                margin: 0;                text-align: center;            }            .story h1 span {display: block;}            .entry a:first-child {display:block; margin-left:10px;}            .entry .story strong {                color: #000000;                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-weight: normal;                letter-spacing: 0;                text-transform: uppercase;            }            .clearfix:after {                content: ".";                display: block;                height: 0;                clear: both;                visibility: hidden;            }        </style>        <!--[if IE]>     <style type="text/css">       .clearfix {         zoom: 1;     /* triggers hasLayout */         }  /* Only IE can see inside the conditional comment         and read this CSS rule. Don't ever use a normal HTML         comment inside the CC or it will close prematurely. */     </style>     <![endif]-->         </head>    <body><div id="wrapper"><div class='full_height_bg_col'></div>            <header id="main-header">                <img src="http://bloogum.net/wp_testing/images/layout/ychead.png" alt="" id="head-pic">                <div id="pg-desc">                    <p>The generic term I'm using for all the stories set in Tsyllaes, the <em>Yrae Chronicles</em>. The ones listed here are the longer stories, several chapters long. All the minifics, usually less than a thousand words, can be found <a href="http://yrae.livejournal.com">here</a>.                    </p>                </div>            </header>             <div id="main" class="clearfix">                <div id="entrystatic" class="entry">                    <a href="galcover.php?filename=silentharmony.jpg"><img src="http://bloogum.net/wp_testing/images/covers/t/silentharmony.jpg" class="thumbnail" alt=""></a> <!--UNIQUE ID ref, use class for multiple -->                    <div class="entrybg"> <!--UNIQUE ID ref, use class for multiple -->                        <div class="story"> <!--UNIQUE ID ref, use class for multiple -->                            <h1>                                <span>Silent</span> Harmony                            </h1>                            <p>                                <strong>Dated</strong> from 2003 to present                                <br><strong>Word Count</strong> 300k across 2 novels with 2 more novels to come                                <br><strong>Chapters</strong> <a href="http://www.livejournal.com/tools/memories.bml?user=yrae&keyword=Silent+Harmony+Chapters&filter=all">Rust:33, Tarnish:30</a>. Chapter three onwards are locked to <a href="http://yrae.livejournal.com/profile">members</a> only.                                <br><strong>Blurb</strong> Yamin wants to be a healer. Her twin sister Nimay dreams of riding with the King's Own. Raykin's long-dead first king has his own plans for the twins. In the harsh red desert of their homeland, Yamin and her sister become the pawns of two sides of royalty, but they're not going down without a fight.                                <br><strong>Notes</strong> <em>Silent Harmony</em> is my baby. It's a story that's been steadily growing since very humble beginnings in February 2003 and unlike any other story I've written, I haven't grown bored of it a year after starting it. SH has never felt like a chore to write. I love the characters more and more every day, I love the setting, and I love how ideas for the story just keep hitting me new and fresh all the time.                                <br>It has swords in it! And flying and wings! And magic, and a red desert, and Prince Nolryn who is a love. And cute little kiddies, who grow up and are spiffy. And beer, and the King's Own, and horses! But mostly, it has swords, magic and a big red desert.                                <br>The prologue and first two chapters are online and viewable to everyone, but the rest of the story will be locked. If you'd like to continue reading, just join the <a href="http://yrae.livejournal.com">Yrae Chronicles</a> community on LiveJournal, click the chapters link above, and all the chapters will be there for your viewing pleasure =3 Since SH is still in its first draft and I inted on publishing it one day, the only condition of reading is that you leave comments as you go.                            </p>                        </div>                    </div>                </div>                <div id="entrystatic2" class="entry">                    <a href="galcover.php?filename=silentharmony.jpg"><img src="http://bloogum.net/wp_testing/images/covers/t/silentharmony.jpg" class="thumbnail" alt=""></a> <!--UNIQUE ID ref, use class for multiple -->                    <div class="entrybg"> <!--UNIQUE ID ref, use class for multiple -->                        <div class="story"> <!--UNIQUE ID ref, use class for multiple -->                            <h1>                                <span>Silent</span> Harmony                            </h1>                            <p>                                <strong>Dated</strong> from 2003 to present                                <br><strong>Word Count</strong> 300k across 2 novels with 2 more novels to come                                <br><strong>Chapters</strong> <a href="http://www.livejournal.com/tools/memories.bml?user=yrae&keyword=Silent+Harmony+Chapters&filter=all">Rust:33, Tarnish:30</a>. Chapter three onwards are locked to <a href="http://yrae.livejournal.com/profile">members</a> only.                                <br><strong>Blurb</strong> Yamin wants to be a healer. Her twin sister Nimay dreams of riding with the King's Own. Raykin's long-dead first king has his own plans for the twins. In the harsh red desert of their homeland, Yamin and her sister become the pawns of two sides of royalty, but they're not going down without a fight.                                <br><strong>Notes</strong> <em>Silent Harmony</em> is my baby. It's a story that's been steadily growing since very humble beginnings in February 2003 and unlike any other story I've written, I haven't grown bored of it a year after starting it. SH has never felt like a chore to write. I love the characters more and more every day, I love the setting, and I love how ideas for the story just keep hitting me new and fresh all the time.                                <br>It has swords in it! And flying and wings! And magic, and a red desert, and Prince Nolryn who is a love. And cute little kiddies, who grow up and are spiffy. And beer, and the King's Own, and horses! But mostly, it has swords, magic and a big red desert.                                <br>The prologue and first two chapters are online and viewable to everyone, but the rest of the story will be locked. If you'd like to continue reading, just join the <a href="http://yrae.livejournal.com">Yrae Chronicles</a> community on LiveJournal, click the chapters link above, and all the chapters will be there for your viewing pleasure =3 Since SH is still in its first draft and I inted on publishing it one day, the only condition of reading is that you leave comments as you go.                            </p>                        </div>                    </div>                </div>                <div id="entrystatic3" class="entry">                    <a href="galcover.php?filename=silentharmony.jpg"><img src="http://bloogum.net/wp_testing/images/covers/t/silentharmony.jpg" class="thumbnail" alt=""></a> <!--UNIQUE ID ref, use class for multiple -->                    <div class="entrybg"> <!--UNIQUE ID ref, use class for multiple -->                        <div class="story"> <!--UNIQUE ID ref, use class for multiple -->                            <h1>                                <span>Silent</span> Harmony                            </h1>                            <p>                                <strong>Dated</strong> from 2003 to present                                <br><strong>Word Count</strong> 300k across 2 novels with 2 more novels to come                                <br><strong>Chapters</strong> <a href="http://www.livejournal.com/tools/memories.bml?user=yrae&keyword=Silent+Harmony+Chapters&filter=all">Rust:33, Tarnish:30</a>. Chapter three onwards are locked to <a href="http://yrae.livejournal.com/profile">members</a> only.                                <br><strong>Blurb</strong> Yamin wants to be a healer. Her twin sister Nimay dreams of riding with the King's Own. Raykin's long-dead first king has his own plans for the twins. In the harsh red desert of their homeland, Yamin and her sister become the pawns of two sides of royalty, but they're not going down without a fight.                                <br><strong>Notes</strong> <em>Silent Harmony</em> is my baby. It's a story that's been steadily growing since very humble beginnings in February 2003 and unlike any other story I've written, I haven't grown bored of it a year after starting it. SH has never felt like a chore to write. I love the characters more and more every day, I love the setting, and I love how ideas for the story just keep hitting me new and fresh all the time.                                <br>It has swords in it! And flying and wings! And magic, and a red desert, and Prince Nolryn who is a love. And cute little kiddies, who grow up and are spiffy. And beer, and the King's Own, and horses! But mostly, it has swords, magic and a big red desert.                                <br>The prologue and first two chapters are online and viewable to everyone, but the rest of the story will be locked. If you'd like to continue reading, just join the <a href="http://yrae.livejournal.com">Yrae Chronicles</a> community on LiveJournal, click the chapters link above, and all the chapters will be there for your viewing pleasure =3 Since SH is still in its first draft and I inted on publishing it one day, the only condition of reading is that you leave comments as you go.                            </p>                        </div>                    </div>                </div>            </div>         </div>    </body></html>
Link to comment
Share on other sites

dsonesuk:

 

Eee yes I think that last one's got it! I knew it'd end up being a javascript solution. I was really hoping with the advent of CSS3 that this (along with centring divs, all that stuff that SHOULD be easy but isn't) would have been fixed. Alas and alack.

 

The second example you gave ALMOST had it--the brown dropped to the bottom, but because all the content divs were floated left, they dropped a line as soon as they got to the right edge of the browser.

 

I'll poke with that now and see if it does what I'm hoping it will! As I say, brand spanking new to JavaScript, so it'll take me a minute to decode it all, but I'll get there. Thank you so much for all your help so far. I feel I owe you something shiny!

 

(also, I'm a she, but never mind X3)

Edited by annarti
Link to comment
Share on other sites

Wait! ALL css NO JavaScript, sorry for gender mistake.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {               /* var column_count = 0;                var entry_width, mainheader_width;                entry_width=$('.entry').outerWidth(true);                mainheader_width=$('#main-header').outerWidth(true);                $('.entry').each(function() {                    column_count++;                });                $('body,html, #wrapper').css({'width': ((column_count * entry_width) + mainheader_width)+60});*/            });        </script>        <style type="text/css">            html, body { margin:0; padding:0;height: 100%; width:100%; overflow-x: visible;}            body {background-image: url('http://bloogum.net/wp_testing/images/layout/whitepaper.jpg');                  color: #9E8166;                  font-family: conquerorsans,Tahoma,verdana,sans-serif;                  font-size: 18pt;                  letter-spacing: 2px;                  overflow-x:auto;            }            #wrapper{min-height:100%; position: relative; overflow-x: visible;                     min-width:100%;            }            p {                line-height: 22pt;                text-align: justify;                width: 100%;            }            a {                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: smaller;                font-weight: normal;            }            a:link {                color: #000000;                text-decoration: none;            }            .thumbnail {                box-shadow: 0 0 10px 0 #000000;                float: left;            }            #main-header {width: 550px; position: relative; margin-left:90px;text-align: center; float:left; }            .full_height_bg_col {                background-image: url('http://bloogum.net/wp_testing/images/layout/brownpaper.jpg');                bottom: -2em;                left: 0;                position: absolute;                top: 90px;                border-radius: 12px;                width:550px;                margin-left: 90px;            }            #main-header div.bg {padding-bottom: 1em;}            #head-pic {                margin-top: 120px;            }            #pg-desc {                margin:0 auto;                width: 390px;                padding-bottom: 1em;            }            #pg-desc p {                color: #000000;                font-size: 20pt;            }            em {                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: smaller;                font-style: normal;                letter-spacing: 0;            }            #main {                margin-left: 680px; overflow-x:visible;                white-space: nowrap;            }            #entrystatic {                /*height: inherit; does not work for older versions of IE */                /*position: absolute; NO NO                top: 150px;*/            }            #main .entry {                padding-right: 95px;                width: 735px;                overflow:hidden;                /*float:left;*/ display: inline-block;white-space:normal; vertical-align: top;            }            .thumbnail {    box-shadow: 0 0 10px 0 #000000;                            float: left;                            margin-top: 150px;            }            .entrybg, .gallerybg {                /*display:none;                height: 395px;                margin-bottom: auto;                position: relative;                top: -125px;                width: 395px;*/                width:450px;                margin-left: 285px;                background: url("http://bloogum.net/wp_testing/images/layout/circle.png") no-repeat scroll center 25px transparent;                overflow: hidden;            }            .story {                /* left: 275px;                 position: relative;                 top: -395px;*/                margin-top:150px;                width: 450px;            }            .story h1 {                border-bottom: 1px solid #000000;                border-top: 1px solid #000000;                color: #000000;                font-family: conquerorcarved,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-size: 35pt;                letter-spacing: 4px;                margin: 0;                text-align: center;            }            .story h1 span {display: block;}            .entry a:first-child {display:block; margin-left:10px;}            .entry .story strong {                color: #000000;                font-family: conquerorcaps,Palatino Linotype,Book Antiqua,times new roman,times,serif;                font-weight: normal;                letter-spacing: 0;                text-transform: uppercase;            }            .clearfix:after {                content: ".";                display: block;                height: 0;                clear: both;                visibility: hidden;            }        </style>        <!--[if IE]>     <style type="text/css">       .clearfix {         zoom: 1;     /* triggers hasLayout */         }  /* Only IE can see inside the conditional comment         and read this CSS rule. Don't ever use a normal HTML         comment inside the CC or it will close prematurely. */     </style>     <![endif]-->         </head>    <body><div id="wrapper"><div class='full_height_bg_col'></div>            <header id="main-header">                <img src="http://bloogum.net/wp_testing/images/layout/ychead.png" alt="" id="head-pic">                <div id="pg-desc">                    <p>The generic term I'm using for all the stories set in Tsyllaes, the <em>Yrae Chronicles</em>. The ones listed here are the longer stories, several chapters long. All the minifics, usually less than a thousand words, can be found <a href="http://yrae.livejournal.com">here</a>.                    </p>                </div>            </header>             <div id="main" class="clearfix">                <div id="entrystatic" class="entry">                    <a href="galcover.php?filename=silentharmony.jpg"><img src="http://bloogum.net/wp_testing/images/covers/t/silentharmony.jpg" class="thumbnail" alt=""></a> <!--UNIQUE ID ref, use class for multiple -->                    <div class="entrybg"> <!--UNIQUE ID ref, use class for multiple -->                        <div class="story"> <!--UNIQUE ID ref, use class for multiple -->                            <h1>                                <span>Silent</span> Harmony                            </h1>                            <p>                                <strong>Dated</strong> from 2003 to present                                <br><strong>Word Count</strong> 300k across 2 novels with 2 more novels to come                                <br><strong>Chapters</strong> <a href="http://www.livejournal.com/tools/memories.bml?user=yrae&keyword=Silent+Harmony+Chapters&filter=all">Rust:33, Tarnish:30</a>. Chapter three onwards are locked to <a href="http://yrae.livejournal.com/profile">members</a> only.                                <br><strong>Blurb</strong> Yamin wants to be a healer. Her twin sister Nimay dreams of riding with the King's Own. Raykin's long-dead first king has his own plans for the twins. In the harsh red desert of their homeland, Yamin and her sister become the pawns of two sides of royalty, but they're not going down without a fight.                                <br><strong>Notes</strong> <em>Silent Harmony</em> is my baby. It's a story that's been steadily growing since very humble beginnings in February 2003 and unlike any other story I've written, I haven't grown bored of it a year after starting it. SH has never felt like a chore to write. I love the characters more and more every day, I love the setting, and I love how ideas for the story just keep hitting me new and fresh all the time.                                <br>It has swords in it! And flying and wings! And magic, and a red desert, and Prince Nolryn who is a love. And cute little kiddies, who grow up and are spiffy. And beer, and the King's Own, and horses! But mostly, it has swords, magic and a big red desert.                                <br>The prologue and first two chapters are online and viewable to everyone, but the rest of the story will be locked. If you'd like to continue reading, just join the <a href="http://yrae.livejournal.com">Yrae Chronicles</a> community on LiveJournal, click the chapters link above, and all the chapters will be there for your viewing pleasure =3 Since SH is still in its first draft and I inted on publishing it one day, the only condition of reading is that you leave comments as you go.                            </p>                        </div>                    </div>                </div>                <div id="entrystatic2" class="entry">                    <a href="galcover.php?filename=silentharmony.jpg"><img src="http://bloogum.net/wp_testing/images/covers/t/silentharmony.jpg" class="thumbnail" alt=""></a> <!--UNIQUE ID ref, use class for multiple -->                    <div class="entrybg"> <!--UNIQUE ID ref, use class for multiple -->                        <div class="story"> <!--UNIQUE ID ref, use class for multiple -->                            <h1>                                <span>Silent</span> Harmony                            </h1>                            <p>                                <strong>Dated</strong> from 2003 to present                                <br><strong>Word Count</strong> 300k across 2 novels with 2 more novels to come                                <br><strong>Chapters</strong> <a href="http://www.livejournal.com/tools/memories.bml?user=yrae&keyword=Silent+Harmony+Chapters&filter=all">Rust:33, Tarnish:30</a>. Chapter three onwards are locked to <a href="http://yrae.livejournal.com/profile">members</a> only.                                <br><strong>Blurb</strong> Yamin wants to be a healer. Her twin sister Nimay dreams of riding with the King's Own. Raykin's long-dead first king has his own plans for the twins. In the harsh red desert of their homeland, Yamin and her sister become the pawns of two sides of royalty, but they're not going down without a fight.                                <br><strong>Notes</strong> <em>Silent Harmony</em> is my baby. It's a story that's been steadily growing since very humble beginnings in February 2003 and unlike any other story I've written, I haven't grown bored of it a year after starting it. SH has never felt like a chore to write. I love the characters more and more every day, I love the setting, and I love how ideas for the story just keep hitting me new and fresh all the time.                                <br>It has swords in it! And flying and wings! And magic, and a red desert, and Prince Nolryn who is a love. And cute little kiddies, who grow up and are spiffy. And beer, and the King's Own, and horses! But mostly, it has swords, magic and a big red desert.                                <br>The prologue and first two chapters are online and viewable to everyone, but the rest of the story will be locked. If you'd like to continue reading, just join the <a href="http://yrae.livejournal.com">Yrae Chronicles</a> community on LiveJournal, click the chapters link above, and all the chapters will be there for your viewing pleasure =3 Since SH is still in its first draft and I inted on publishing it one day, the only condition of reading is that you leave comments as you go.                            </p>                        </div>                    </div>                </div>                <div id="entrystatic3" class="entry">                    <a href="galcover.php?filename=silentharmony.jpg"><img src="http://bloogum.net/wp_testing/images/covers/t/silentharmony.jpg" class="thumbnail" alt=""></a> <!--UNIQUE ID ref, use class for multiple -->                    <div class="entrybg"> <!--UNIQUE ID ref, use class for multiple -->                        <div class="story"> <!--UNIQUE ID ref, use class for multiple -->                            <h1>                                <span>Silent</span> Harmony                            </h1>                            <p>                                <strong>Dated</strong> from 2003 to present                                <br><strong>Word Count</strong> 300k across 2 novels with 2 more novels to come                                <br><strong>Chapters</strong> <a href="http://www.livejournal.com/tools/memories.bml?user=yrae&keyword=Silent+Harmony+Chapters&filter=all">Rust:33, Tarnish:30</a>. Chapter three onwards are locked to <a href="http://yrae.livejournal.com/profile">members</a> only.                                <br><strong>Blurb</strong> Yamin wants to be a healer. Her twin sister Nimay dreams of riding with the King's Own. Raykin's long-dead first king has his own plans for the twins. In the harsh red desert of their homeland, Yamin and her sister become the pawns of two sides of royalty, but they're not going down without a fight.                                <br><strong>Notes</strong> <em>Silent Harmony</em> is my baby. It's a story that's been steadily growing since very humble beginnings in February 2003 and unlike any other story I've written, I haven't grown bored of it a year after starting it. SH has never felt like a chore to write. I love the characters more and more every day, I love the setting, and I love how ideas for the story just keep hitting me new and fresh all the time.                                <br>It has swords in it! And flying and wings! And magic, and a red desert, and Prince Nolryn who is a love. And cute little kiddies, who grow up and are spiffy. And beer, and the King's Own, and horses! But mostly, it has swords, magic and a big red desert.                                <br>The prologue and first two chapters are online and viewable to everyone, but the rest of the story will be locked. If you'd like to continue reading, just join the <a href="http://yrae.livejournal.com">Yrae Chronicles</a> community on LiveJournal, click the chapters link above, and all the chapters will be there for your viewing pleasure =3 Since SH is still in its first draft and I inted on publishing it one day, the only condition of reading is that you leave comments as you go.                            </p>                        </div>                    </div>                </div>            </div>         </div>    </body></html>
Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

@dsonesuk

Finally got around to it--thank you SO MUCH for your help! I've got it all working perfectly now (bloogum.net if you're curious). That's the last time I'll be trying that in a hurry. Thanks again, you've been a lifesaver!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...