Forum Moderators: not2easy
I am nearly there but I can not get the left and right columns which has no content to fill up.
Here is my HTML and CSS code.
Many Thanks
Donald
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="styles/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="contents">
</div>
</div>
</body>
</html>CSS:
html,body{
margin:0;
padding:0;
height:100%;
border:none
}body
{
margin: 0;
padding: 0;
font-family: Arial;
color: #333333;
overflow: auto;
background-color: #c2e0ff;
}
div#page
{
text-align: center;
background-color: Lime;
height: 200px;
width: 100%;
height: 100%;
}
div#page div#leftside
{
background-color: #148FA5;
float: left;
height: 100%;
}
div#page div#contents
{
width: 800px;
height: 100%;
margin: 0px auto;
background-image: url(../images/background-blend.jpg);
background-repeat: repeat-y;
}
div#page div#rightside
{
background-color: #D6EAEF;
float:right;
height: 100%;
}
I just joined about 5 minutes ago looking for webmasterly advice myself :), but I have been looking at tutorials here and there and believe that I have spotted the first woe of your code problem, and I have, as well, some suggestions beyond that.
First of all, your CSS coding, as far as my novice qualifications span, is awry, because you cannot designate a selector in CSS with 'div' (or 'jive' or anything else!) before a '#' - itself an indicator for a DIV - while you may of course place a tag designation (a 'P', a 'ul', etc.) before the ".",which designates a CLASS. Try removing the 'div's in front of your '#' selector and see if that works.
To the second part, there are a lot of good tutorials out there that can explain how to do a 3-col layout in CSS. One good one I have seen suggests floating the left and right columns ('position:relative', then 'float:left' or 'float:right' as the case may be). I believe that there is also a mega-problem with specifying a 'width:100%' for the container which houses your two columns (your center column is not really a column per se, in this setup, but the default "column" that occupies the space between the two side columns... the trick is to have the two colums to overlap the 'padding:left' and 'padding-right' of the container (sometimes called a "wrapper" or an "outer") by 1 pixel or so). I have had problems similar to that which you describe with headers, footers, and side colums extending off to one side, or lopped off, with only one half showing. Regarding the 'width.100%' property, I believe that this should be placed in the "parent" of the main container (which itself is the parent to the colums, etc.) - grandparent? :) - i.e., in the snippet where 'body' properties are defined (usually the very first CSS text/style entry).
I will get back to you on this if the first suggestion doesn't work (and I admit that I am on shaky ground here, being a novice, but I have noticed that one may specify all manner of tags and names AFTER the '#(name)' is specified, for example, if one wishes to specify text properties for all the 'P's that belong to a certain 'div'), and if the second suggestion above doesn't work, or is not concrete enough. But maybe a pro will jump in in the meantime and set us both straight!
Good luck!
Webbed_Foot
1. You can use div#id if you like. It's just a matter of specificity. Try reading about the cascade at w3.org
2. Why would you want a 800px fixed center and two fluid by it's sides? What should happen with that content when the window is less than 800px? Mixing fixed and fluid is tricky. Why not use percentages all over?
Thanks first to sifedi for setting me straight about the CSS syntax...
I don't know if links to websites are allowed here, so I will do this two ways, one of which will hopefully not be edited out. Go to pmob in the UK (remember that UK web addresses are prefixed with "co dot") and look for tutorials, possibly under "temp", then click on the one explaining a 3-column setup, OR, if links are allowed here, go to:<http://www.pmob.co.uk/temp/3colfixedtest_explained.htm>.
Webbed_Foot
I suppose you could have lets say a 600px fixed width center, and 200px min-widths for the flexible width sides, but even then it makes more sense for the center div to auto-size, and have the sides fixed.
Now about the issue of div#id that webbed_foot was talking about:
adding the element name before the id isn't a problem, but it's not at all necessary for IDs (just a waste of typing/space) because you can only have 1 ID, and it won't conflict with other ids as long as you're using it right (as in not giving an element two IDs, or having multiple elements with the same ID). It can definately be used for classes though, such as ul.warning and span.warning.
Summary: useless code, but not harmful.
Here's another thing that probably isn't harmful, but seems strange to me (although I don't know exactly waht it is):
<html xmlns="http://www.w3.org/1999/xhtml" >
your page has doctype HTML 4.01, but you're referencing some sort of xhtml URI there. I'd remove the xmlns attribute, but I don't really know what it is either.
"body{margin: 0;padding: 0;" is redundant. you already specified that for body and html
div#page also doesn't need width:100% (in this case), since that's automatic for divs (in non-floated, non-positioned scenarios).
I also don't know why you have height:200px; then height:100% for the same element. perhaps it was something you were testing and forgot to remove it.
I'm also quite sure that you don't need #page at all, and you can just put it's style info into the body.
There is no difference between div#id and #id except specificity unless you are incorrectly applying the same id to more than one element on the same page. By specificity I mean that div#id overrules #id in the cascade.
It's also worth noting that the rules involved in div#id will only be applied to a <div id="id"> element, not <span id="id"> or any other tag, even if they correctly reside on different pages (if they both use the same style sheet). So in that sence there are differences between the syntaxes.
Actually there's one thing I forgot, and it's a very notable and understable thing to consider:
You may want to prefix the element before the id in case you're dealing with (or are yourself) absent minded people who are browsing through only the CSS, and don't know what element an id is (this is typically the result of a bad id name though). This is also a reason to put CSS in the order it appears in the HTML, so that you (and others) could maybe read the CSS a bit easier with respect to the HTML it's Styling.
So yes there is a use, which is certainly not discreditable, but nothing special either.
second.. and I'm going in order of questions here, so excuse me if I backtrack or repeat ;)
>>left and right elastic with fixed width middle
that is going to best achieved with negative margins. Some will likely say that's a hack but bear in mind what you're asking. As someone else previously said, what do you expect to happen when the window is narrowed? Do you still want the 800px wide center to be fixed? If so then you will need the side columns to disappear off the sides (negatively speaking)
Webbed_Foot, a warm welcome to you too!
while I like a lot of what you say, unfortunately it is not correct :(
because you cannot designate a selector in CSS with 'div' (or 'jive' or anything else!) before a '#' - itself an indicator for a DIV
You can! as sifredi already said.. it is the ID itself which is unique, you can apply the ID to a div, span, p, h1, whatever. No an ID is not necessarily an indicator of a 'div', but if you then add the element to the ID selector you are adding specificity, i.e. you are getting more specific about which element you are targeting, though not necessarily by ID selector.. perhaps by Cascade rules?
While I agree that it is generally not necessary to add an element before an ID selector, because in almost all cases there should only ever be only one ID, sometimes it is necessary
Imagine that you have a page ...never mind.. lets take a recently applicable example..
Google Blogs, blogger pages, are very flexible, you can incorporate them into your own site (complete with your URL) if you so wish. They all (or most) have a very familiar 'navbar' at the top do they not?
It used to be very easy to get rid of that navbar, via CSS, before because the navbar had an ID, so in your stylesheet you just put
#navbar {display: none;}Homework perhaps.. but there is an answer in this thread
Hint: take a look at specificity! look at the source and what order of the stylesheet calls are, it's not as simple as the Cascade or ID cascade any more is it
You can override most generated code, if you understand the specifics of CSS :)
[edited by: SuzyUK at 9:39 pm (utc) on Aug. 27, 2007]
Anyways, I gather from the above that most everyone is in agreement that it is best to fix the side columns and let the remainder fill up the center column, so that this elasticity will expand where necessary, depending on the viewer's monitor resolution, which is also what I was getting at, and which is what the URL reference was all about.
I have in the meantime abandoned the strictly CCS 3-column layout in favor of a different solution that I, oddly enough, began with about ten days ago, namely, a CSS solution augmented with Javascript in order to not have to do so many cumbersome fixes in straight, or pure, CSS, given CSS' inherent limitations. And I am pleased with the result, so far at least, though one must be careful of being overly confident, I am beginning to appreciate, for the next stage, or add-on, might topple the whole card house, which itself is a good argument for learning to write lean, mean code, I reckon.
Ciao,
WF
Marshall
I want the site contents to be with in the 800px div which has a gradient background (repeat-y) and I need two different color on each Vertical-side of the 800px div.
New code below
Hope this helps
Many Thanks
Donald
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
border:none
} body
{
margin: 0;
padding: 0;
}
div#page
{
text-align: center;
width: 100%;
height: 100%;
}
div#page div#contents
{
width: 800px;
height: 100%;
margin: 0px auto;
background-image: url(background-blend.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="page">
<div id="contents">
</div>
</div>
</body>
</html>
[edited by: donaldDoor at 9:40 pm (utc) on Aug. 29, 2007]
Marshall
