Sizing liquid and static divs

[Phenix1050]

Hi all, new developer attempting his first page. What I'm attempting is relatively simple, but I seem to be messing it up fairly badly (though it's my first attempt at css so I don't feel so bad).

I'm working with an external style sheet, since my site has a multiple pages. I've managed to do a horizontally liquid banner and an interactive navigation bar. What I'm attempting to do now is to have a fairly simple design below the navigation bar. I've set a div to contain my two internal divs for text. The first contains my sidebar, which contains text on most pages, but contains a twitter embeddment on one.

The second contains my text, which varies from page to page. Thus the size of this div also varies from page to page. The trouble I'm having is getting the two divs to remain the same in height. Since I've created a gradiant for the sidebar, I'd like it to extend all the way down as far as my text goes.

Here's what I've done created three divs: one container div, set to 100 width and 0 margin, one div for the sidebar, and one for the main text. Here's the css I've got so far:

div#sidebar {
width: 250px;
height:100%;
float:left;
background-image:url('Images/SidebarRepeat.jpg');
background-repeat: repeat-y;
text-align:left;
color: white;
margin: 0;
padding:4px;
}

div#maintext {
float:right;
background-color:#FFFFFF;
position: relative;
left:0px;
top: 0px;
text-indent: .5cm;
margin: 0;
padding:4px;
}

Is there anybody who can help me get these two divs to be the same height regardless of the context (I'd prefer not to have a static height set by px if possible, but if that's the only thing I can do, so be it.

if you want to see what I'm looking at, this is my site:

http://www.phenix-raven.com

and another example of how it the css looks in action is

http://www.phenix-raven.com/editorials.html

[WebJoel]

You got this horizontal scrolling thing going on, too. This (below) may not be why, but:

<div style="width:200px;text-align:center">
<embed src="http://static.twitter.com/flash/twitter_timeline_badge.swf" flashvars="user_id=3055011&color1=0xFF&color2=0xFF0000&textColor1=0xFFFFFF&textColor2=0x0&backgroundColor=0x929292&textSize=10"
width="200" height="650" quality="high" name="twitter_timeline_badge" align="middle" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer"></embed><br>
<a style="font-size: 11px; color: #0x000000; text-decoration: none" href="http://static.twitter.com/Phenix"><img src="http://static.twitter.com/images/twitter_bubble_logo.gif" border="0" /></a></div>
</div> I doubt that there is any meaningful "text" to "center" whatsoever in this embed.
Since you stated a width ("200px"), -it would "center" is you removed "text-align:center" and used "margin:0 auto;" instead.

That scroller navigation thing to the left 'overflow' into the content, huh? Setting a height and "overflow:hidden" might cure that.

I'm come back to this later today... (expecting company any minute now..) :)

p.s.: -the 2nd URL your provided doesn't work..

[Phenix1050]

whoops. sorry, the correct link I was trying to show is:
http://www.phenix-raven.com/editorials.htm

(no "l" at the end. hehe)

I also went ahead and made some changes based on your suggestions. Before I made changes today, I had set the "text" div to be at fixed position from the top left of the page and hadn't seen the horizontal scroller problem. I'll play around and either change it back to fixed or set some negative margins.

Thanks in advance for the help.

[Phenix1050]

Thanks for the help. I made some changes based on your recommendations. I found the source of the problem with the horizontal scroll. It's the footer being 100% across and having a buffer. I'm removing that to avoid problems in the future.

I actually hadn't noticed that. The horizontal footer has only been in that position for a few hours, actually. Fixing it now, hopefully.

[WebJoel]

...Before I made changes today, I had set the "text" div to be at fixed position from the top left of the page and hadn't seen the horizontal scroller problem. If the DIV is relative positoned, bear in mind, it still occupies the relative space propor to being re-positioned. -Content will still 'flow around' the virtual-position as well as the ACTUAL position.
"absolute" removed from the document flow, ergo, would make everything scrunch-up and occupy it's space. I think that is the problem. 'position:relative;' I thought you have top:0; left:0;, so this won't matter anyway (since 0,0 would be the default position of "relative" anyway...)

I am really a major advocate of optimization of page, noticed this:

<div id="maintext">
<p class="mt">Yes, it's May. And Phenix-Raven is....</p>
<p class="mt">Despite....</p>
<p class="mt"> etc etc etc...</p> etc...
could be more easily addressed to removed the recurrent class="mt" from the what, -seven paragraphs in that DIV, -and add this to your current CSS:

#maintext {foo:bar;}
#maintext p {the foo:bar that is currently class="mt";}

that way, you removed some repetitive bytes of uncessary text from the document, and any additional "<p></p>" added to the DIV #maintext will have the class="mt" applied to the "<p>" already. :)

Little things like this, applied consistantly, can reduce a page-weight dramatically.
I only chastise this today (it isn't part of your request) because I just finished a clients sites makeover last night, -what I did looks 99.9% identical what what client had before (except NOW it also works in Firefox, Mozilla and Opera whereas before, it only worked in IE<7), and the page-weight went from 143-KB to just under 45-KB (and I am sure that if I optimized more, I could drop another 10-KB off of that, too). :)

Will examine your page in more detail now... :) bbl

[Phenix1050]

Ah yes, that sounds like a much, much easier way to do it, and it will likely save some unneccesary file size. Truth be told, I didn't even begin to calculate file size in there. Heck, since this is the first site I've ever built, I've been more concerned with getting it working than anything else.

Since people here generally design webpages, I'd like to ask: for a newbie, how does the site look? I know I'm no professional, but I was definately pleasantly surprised when it ended up looking like it did (well..in IE, anyway, I'm still working on getting it to work cross-browser)

[Phenix1050]

Hate to /bump needlessly, but I'm still unable to resolve this issue. I've been thinking about it quite a bit and came up with a sollution that *might* be possible. I think I could have a container div and have columns extend infinitely upwards from a position at the bottom of the container div, then set the text to a higher z-index and place it at the top of the container div, and then simply hide the overflow.

Problem is, this is my first site ever and the possibility of me getting that right are about one in a million. I'm not even sure if what I just described would actually work, and even if it does, I'm not sure exactly how I'd code that. Again, any help would be greatly appreciated.

[Centauri]

You seem to be concentrating on equal column height when you have some serious issues other than that.

The whole site is about twice the width of the screen, no matter what width you pull the screen to. What you seem to call the "left column" is actually around the centre of the screen positioned to the right of the navbar. To the right of this is what appears to be a footer which is what is pushing the page width. The text appears below the grey column, out of site until you scroll down. In short, it looks a mess, and column heights are the least of your worries.

Can you provide a pic of how you want it to look, and we can advise further.

[Centauri]

Aatached is a screen grab (composite - had to paste together 4 screen grabs to get it all) of what your site looks like in FF 1.5. The overall width seems to be constantly double the avaiable screen width ......

[Phenix1050]

Yeah, I'm kinda concentrating on IE, as that's the browser I use most (I know, I know, it's evil!!!)

I have firefox too, and I can see the problems there, but as I've said, I'm still extremely new to this, so I'm not sure of what's causing the cross-browser problems. I was trying to tackle the height issue first, but the more I play with it, the less I'm bothered by the difference in height. Perhaps that's a problem, but for now I'm fine with it.

Any idea of where the problem with firefox lies? I seriously don't even know where to begin with that.

[Phenix1050]

oh, and I snagged a screenshot of how it's looking in IE, on my computer. I have a very widescreen, but what I want is for that left segment to always extend all the way down, no matter how long the open (white) area is.

[Centauri]

The first thing that I see is an incomplete doctype, which puts IE into it's very buggy quirks mode - you have therefore been writing broken code to suit a broken browser...... Firefox is just rendering it as coded.

I have just looked at the site in IE7 (which I only have on another machine for testing purposes - won't use that POS), and I think I see what you are trying to achieve. The layout is broken in IE6 as well (but not as bad)

I will have a little play with it .............

[Centauri]

Ok, had a play with this. I was going to try and do it with minimal changes to the html, but a fair bit needed fixing. The html below is the editorial page. I made various changes, including a full html 4.01 strict doctype, as well as other various changes to get rid of redundancy and make the layout work cross-browser. I addressed the column height issue by simply moving the background to the #text div, so it looks like the column goes all the way down.

Html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phenix-Raven Editorials- No Need to Think for Yourself, We'll Do It for You. </title>
<link rel="stylesheet" type="text/css" href="phenix.css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="bannerbuffer"></div>
<div id="banner">
<h1>Phenix - Raven</h1>
</div>
</div>
<div id="nav">
<ul>
<li><a href="http://www.phenix-raven.com/">Home</a></li>
<li><a href="http://www.phenix-raven.com/features.htm">Features</a></li>
<li><a href="http://www.phenix-raven.com/editorials.htm">Editorials</a></li>
<li><a href="http://www.phenix-raven.com/forum">Forums</a></li>
<li><a href="http://www.phenix-raven.com/reviews.htm">Reviews</a></li>
<li><a href="http://www.phenix-raven.com/bios.htm">Bios</a></li>
<li><a href="http://www.phenix-raven.com/faq.htm">FAQs</a></li>
</ul>
</div>
<div id="text">
<div id="sidebar">
<h2>PREVIOUS STAFF PICKS:</h2>
<hr />
<ul>
<li><a href="http://www.kiwisbybeat.com/minus1.html">Minus</a></li>
<li><a href="http://www.empirearcadia.com">Empire Arcadia</a></li>
</ul>
<p>Okay, so there's some stuff to put here! Yay!</p>
<h2>GAMING CHARITY LINKS:</h2>
<hr>
<a href="http://www.childsplaycharity.org"><img src="Images/cplogo.jpg"></a>
<a href="http://www.onebiggame.org"><img src="Images/onebiggamelogo.jpg"></a>
<h2>GAMING ADVOCACY LINKS:</h2>
<hr>
<a href="http://www.theeca.com"><img src="Images/logo_eca.jpg"></a>
<a href="http://www.gamepolitics.com"><img src="Images/gpheader.jpg"></a>

<p> I'm open to suggestions for what I should put in here. My main focus is likely to be along a couple of routes.
News, Community, Culture, and perhaps a special section for fundraisers, and then, of course, the direct links to the monthly archives. I don't want to start this without some idea of what I'm getting into (suggesting sites is always a finnicky thing, since too many corporate sites linked from yours would probbaly make me feel like a shill, even if I'm not. So while I'm glad that I'll have stuff to put in this section, I really, really don't want it full of corporate giants. Any help on good sites would be appreciated. </p>
</div>

<div id="maintext">
<h2>EDITORIAL OF THE MONTH:</h2>
<h3>The Keyboard is Mightier than the Energy Sword</h3>
<hr />
<p>I look at Gears of War, and I see some of the greatest gameplay Ive seen in a while. I see excellent combat mixed with beautiful graphics. I seea main story that can be beaten in the course of a weekend (easily) and a storyline that promises more than it delivers. I see a game that has all the makings of a fabulous universe, and I see that rich history robbed by lack of coherant plot. I see potential, and I see that potential wasted.</p>
<p>Storyline, or lack thereof, is something that a lot of games take for granted. Consumers seem satiated with mediocre storytelling over wonderful gameplay. They seem to think that story can be overlooked. And to a degree, they are correct. Gears of War is highly acclaimed for its gameplay, and most critics overlook the plot holes and lack of depth or storyline cohesion.</p>
<p>The same can be said about God of War II. The original was a well-paced story, with plot twists and revelations that shocked the viewer. In God of War II, the story is truly told only at the begining and end. Zeus betrays you, you go to magical island, kill stuff, and go back in time. Everything along the way seems more a oh, what other mythological people/places/things can we throw in there. And its a good gamebut the story doesnt develop. Krados smolders with generic rage, but he seems more a petulant child than tortured warrior.</p>
<p>First of all, we'll start with the truth-- this is not a website that's going to change the world. No International Peace Treaty will be contrusted using the models developed on this site. No national secuity policy aimed at preventing terrorism will be desinged here. Rest assured that except for other game fans, nothing we do here will have any real-world significance.</p>
<p>Yet there are signs of hope among the games. Games like Indigo Prophesy (XBox) showed the world what a story-driven game can bring to the table and this year marks a serious return of the written word, due largely in part to the efforts of one company: Bioware. </p>
<a href="http://www.phenix-raven.com/editorials/2007/05/12/the-keyboard-is-mightier-than-the-energy-sword/" class="largelink">CLICK HERE FOR THE REST OF THE ARTICLE &gt;&gt;</a>
<hr />
<h2>STAFF PICK OF THE MONTH:</h2>
<h3>Empire Arcadia</h3> <img src="Images/eaip5.gif" class="img-right" alt="">
<p>If you live in New York, you may already have heard about <a href="http://www.empirearcadia.com" class="redlink">Empire Arcadia</a>, the gamer community website that's promoting gaming culture, industry, and community (the &quot;Tri-Force&quot; of gaming, as they see it). Empire Arcadia was founded in 2002 and since then has had it's hand in almost all aspects of gaming culture. In tournaments around the world, Empire Arcadia has spread it's influence, and their fame has grown recently. </p>
<p>However, they are not all about fame and glory. As their website says, &quot;the Empire's goal is to evolve the level of video gaming and remove the social stigma attached to the video game culture around the world&quot;. It does this through education of new gamers, open tournaments and innovative corporate policies that move the gamer out of the basement and into the world. The Empire supports both professiona gamers and casual gamers alike, and unites them as one. </p>
<p>This month, Empire Arcadia is spreading the message of the gamer culture through their &quot;Gamers Unite&quot; rally in support of <a href="http://www.gamersagainstviolence.us/" class="redlink">>Gamers Against Violence</a>. This site, and the rally, are designed to show that while many games do contain violence, that gamers themselves can rise against it. In seperate rallies across the country (May 5th in NYC, May 12th in LA), Empire Arcadia and the Gamers Against Violence will speak out against real-world violence, and against those who advocate against video games.</p>
<br />
<br />
</div> <!--End of Main Text-->

<div id="footer">
<ul>
<li><a href="http://www.phenix-raven.com/">Home</a></li>
<li><a href="http://www.phenix-raven.com/forum">Forums</a></li>
<li><a href="http://www.phenix-raven.com/editorials.htm">Editorials</a></li>
<li><a href="http://www.phenix-raven.com/bios.htm">Bios</a></li>
<li><a href="http://www.phenix-raven.com/reviews/index.htm">Reviews</a></li>
</ul>
&copy;2007 Phenix-Raven
<a href="mailto:phenix@phenix-raven.com">Administrator</a>
<a href="mailto:admin@phenix-raven.com">Contact Us</a>
<a href="mailto:submissions@phenix-raven.com">Contribute</a>
</div>
<!--end of footer-->

</div><!--end of text div-->

</body>
</html>


css follows in next post

[Centauri]

css for above : /* CSS Document */
/***** Global Settings *****/
* {
margin:0;
padding:0;
}

/****Individual Divisions******/
body {
color:#000;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
img {
display: block;
border: 0;
}
#banner {
height: 100px;
background-image:url('Images/BannerRepeat.jpg');
background-repeat: repeat-x;
}
#banner h1 {
background-image: url(Images/Bannernew.jpg);
width: 528px;
height: 100px;
font-size: 1px;
text-indent: -1000px;
margin: 0 auto;
}
#nav {
background:black url(http://www.phenix-raven.com/Images/MenuDefault.jpg);
background-repeat: repeat-x;
border: 1px solid #000000;
border-width: 1px 0;
}
#nav ul {
width: 37em;
display: block;
height: 25px;
margin: 0 auto;
}
#nav li{
border-left: 1px solid white;
border-right: 1px solid white;
list-style: none;
float: left;
}
#nav a{
height:25px;
color: white;
text-decoration: none;
background-image: url(Images/MenuDefault.jpg);
line-height: 25px;
float: left;
padding: 0 15px;
font-size: 12px;
font-weight: bold;
}
#nav a:visited{
color: white;
background-image: url(Images/MenuVisited.jpg);
}
#nav a:active {
color: white;
background-image: url(Images/MenuActive.jpg);
}
#nav a:hover {
color: black;
background-image: url(Images/MenuActive.jpg);
}
#text {
overflow: hidden;
background-image: url('Images/SidebarRepeat.jpg');
background-repeat: repeat-y;
}
#sidebar {
width: 242px;
float:left;
color: white;
padding:4px;
}
#sidebar p {
color:#FFFFFF;
text-indent: 0.75cm;
padding: 4px;
font-size: 11px;
}
#sidebar h2 {
color: #FFFFFF;
font-size: 16px;
}
#sidebar ul {
margin: 15px 0;
}
#sidebar li {
list-style-type: disc;
list-style-position: inside;
margin-left: 10px;
}
#sidebar a {
color: #FFFFFF;
}
#maintext {
background-color:#FFFFFF;
text-indent: 0.5cm;
padding:4px;
margin-left: 252px;
}
#maintext p {
color:#0000FF;
text-indent: 0.75cm;
padding: 4px;
font-size: 11px;
margin: 10px 0;
}
#maintext h2 {
color: #000000;
font-size: 14px;
text-align: center;
margin: 10px 0;
}
#maintext h3 {
color: #0000FF;
font-size: 12px;
font-weight: normal;
text-align: center;
margin: 10px 0;
}
#maintext .largelink {
text-align: center;
font-weight: bold;
display: block;
margin: 15px 0;
}
#maintext .redlink {
color: #FF0000;
font-weight: bold;
}
#footer{
background-color: #929292;
color: #FFFFFF;
}
#footer ul {
float: right;
display: inline;
margin-right: 20px;
}
#footer li {
float: left;
list-style-position: inside;
margin-right: 5px;
}
#footer a {
color: #FFFFFF;
font-weight: bold;
}
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }


It all now works cross-browser. ALWAYS do your main testing with Firefox and continuously check cross-browser while developing.

Cheers
Graeme

[Phenix1050]

Thank you very much for the help. I'm fidgeting with the rest of the pages now, trying to get as much from what you changed as possible. I'll start using Firefox to test as well.

by the by, can anyone recommend any good sites/books for getting a better grasp on .css/html? I'm learning as I go here, and while it's fun learning by doing, it's hard to know WHERE your mistakes are when you make them.