I thought doing a simple two column layout for my blog would be easy using CSS but I'm having a nightmare...<br />
<br />
On my blog you can link to each individual post and it then has its own page generated by Greymatter, so sometimes the menu on the right will be longer than the main content.<br />
<br />
But when the menu gets longer than the content, the menu spills out of the main container div and it all looks messed up.<br />
<br />
It's most obvious what I mean when viewed with Netscape I think...<br />
<br />
You can see it here:<br />
<br />
<!-- m --><a class="postlink" href="http://www.cageofmonkeys.co.uk/csstest.html">http://www.cageofmonkeys.co.uk/csstest.html</a><!-- m --><br />
<br />
My CSS is here:<br />
<br />
<!-- m --><a class="postlink" href="http://www.cageofmonkeys.co.uk/stylesheet.css">http://www.cageofmonkeys.co.uk/stylesheet.css</a><!-- m --><br />
<br />
Is there anything I can do to make look okay regardless of which section is the longest?<br />
<br />
I don't care if the CSS needs a complete rewrite, I want to learn...<!--content-->OK, this isn't a solution as such, it's a workaround though
<br />
<br />
Add something like:<br />
height: 850px;<br />
to the #container entry in your CSS.<br />
<br />
A solution would be to replace container with the body instead (if you understand what I mean)<!--content-->you need to have a container for the 2 columns as well as inside the main body container. try that and see what you get.<!--content-->
<br />
On my blog you can link to each individual post and it then has its own page generated by Greymatter, so sometimes the menu on the right will be longer than the main content.<br />
<br />
But when the menu gets longer than the content, the menu spills out of the main container div and it all looks messed up.<br />
<br />
It's most obvious what I mean when viewed with Netscape I think...<br />
<br />
You can see it here:<br />
<br />
<!-- m --><a class="postlink" href="http://www.cageofmonkeys.co.uk/csstest.html">http://www.cageofmonkeys.co.uk/csstest.html</a><!-- m --><br />
<br />
My CSS is here:<br />
<br />
<!-- m --><a class="postlink" href="http://www.cageofmonkeys.co.uk/stylesheet.css">http://www.cageofmonkeys.co.uk/stylesheet.css</a><!-- m --><br />
<br />
Is there anything I can do to make look okay regardless of which section is the longest?<br />
<br />
I don't care if the CSS needs a complete rewrite, I want to learn...<!--content-->OK, this isn't a solution as such, it's a workaround though
<br /><br />
Add something like:<br />
height: 850px;<br />
to the #container entry in your CSS.<br />
<br />
A solution would be to replace container with the body instead (if you understand what I mean)<!--content-->you need to have a container for the 2 columns as well as inside the main body container. try that and see what you get.<!--content-->