So far, I have 3 levels of nested DIVs for my template page. I'm thinking that when I add actual content, I may have to add two more levels in some places.
This page is a basic header, two column and footer layout.
Any problem with that approach?http://www.inknoise.com/experimental/layoutomatic.php
Use the drop down menu to select a two column layout and see if that is a little better way of doing it.Thanks. I was able to get it to work, but it took a bit more CSS
Now, what about that menu bar on the left that doesn't scale to the bottom. Is there a way to fix that? That's about the only problem I'm having at this current point in time.
I'm going to have a look in the search...What do you mean it doesn't scale to the bottom? Are you talking about if you included a border on the right that it doesn't go all the way done to the bottom on outer div? I would have the border be created by the content area since it would be the biggest section of your site, or I would hope so.
Errr, well, here is the page in question:
<!-- m --><a class="postlink" href="http://dstudios.ca/temp/csstest5.html">http://dstudios.ca/temp/csstest5.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://dstudios.ca/temp/style3.css">http://dstudios.ca/temp/style3.css</a><!-- m -->
The menu on the left (blue colour) doesn't scale down flush to the footer (purple colour).
I've tried this page:
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/100percheight.html">http://www.quirksmode.org/css/100percheight.html</a><!-- m -->
However, I have to have both blue and green section have 100% thus they both scale down to the bottom of the screen. This means that there might be alot of empty space if the content is not long enough in the green section.Found a way to solve this problem, but not sure its the optimal way to do so. Here is the code and CSS for it. Basically, I put the background color to the content DIV instead of the leftCol DIV. I also specify a white background color for the rightCol DIV.
<div id="content">
<div id="leftCol">
testing...
</div>
<div id="rightCol">
testing...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>here too...
</div>
</div>
#content{
width: 600px;
background-color: Blue;
}
#leftCol{
float: left;
width: 150px;
}
#rightCol{
float: right;
width: 450px;
background-color: white;
}Yep, that was pretty much what I was going to suggest.Thanks!
I have some down time during the Christmas break here at work. Thought I'd dive in to learn about this CSS positionning thing
This page is a basic header, two column and footer layout.
Any problem with that approach?http://www.inknoise.com/experimental/layoutomatic.php
Use the drop down menu to select a two column layout and see if that is a little better way of doing it.Thanks. I was able to get it to work, but it took a bit more CSS
Now, what about that menu bar on the left that doesn't scale to the bottom. Is there a way to fix that? That's about the only problem I'm having at this current point in time.
I'm going to have a look in the search...What do you mean it doesn't scale to the bottom? Are you talking about if you included a border on the right that it doesn't go all the way done to the bottom on outer div? I would have the border be created by the content area since it would be the biggest section of your site, or I would hope so.
Errr, well, here is the page in question:<!-- m --><a class="postlink" href="http://dstudios.ca/temp/csstest5.html">http://dstudios.ca/temp/csstest5.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://dstudios.ca/temp/style3.css">http://dstudios.ca/temp/style3.css</a><!-- m -->
The menu on the left (blue colour) doesn't scale down flush to the footer (purple colour).
I've tried this page:
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/100percheight.html">http://www.quirksmode.org/css/100percheight.html</a><!-- m -->
However, I have to have both blue and green section have 100% thus they both scale down to the bottom of the screen. This means that there might be alot of empty space if the content is not long enough in the green section.Found a way to solve this problem, but not sure its the optimal way to do so. Here is the code and CSS for it. Basically, I put the background color to the content DIV instead of the leftCol DIV. I also specify a white background color for the rightCol DIV.
<div id="content">
<div id="leftCol">
testing...
</div>
<div id="rightCol">
testing...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>here too...
</div>
</div>
#content{
width: 600px;
background-color: Blue;
}
#leftCol{
float: left;
width: 150px;
}
#rightCol{
float: right;
width: 450px;
background-color: white;
}Yep, that was pretty much what I was going to suggest.Thanks!
I have some down time during the Christmas break here at work. Thought I'd dive in to learn about this CSS positionning thing