Floating column content

Get Help With All Aspects of Web Design & Design Software

Moderators: Moderator, Global Moderator

Post Reply
Trinity
Hero Member
Hero Member
Posts: 808
Joined: Wed May 05, 2004 9:19 am

Floating column content

Post by Trinity »

I'm having a bit of trouble with the CodeCrypt CSS - when the conent in the sidebar is longer than the content in the main area, the sidebar does not extend, making the page look horrible.

Example: [url=\"http://codecrypt.org/forums.php\"]http://codecrypt.org/forums.php[/url]

CSS Link: [url=\"http://codecrypt.org/style.css\"]http://codecrypt.org/style.css[/url]

Thanks in advance....
Sp3culuM
Hero Member
Hero Member
Posts: 662
Joined: Mon May 17, 2004 2:36 pm

Floating column content

Post by Sp3culuM »

Uh, I had that problem with KB. The footer is higher than it should be, side was supposed to push it down but I couldn't figure out how. Sorry <img src=\'http://www.killanet.net/forum3/public/s ... #>/cry.gif\' class=\'bbc_emoticon\' alt=\':(\' />

Bet you're gutted thinking I replied to solve your problem <img src=\'http://www.killanet.net/forum3/public/s ... igwink.gif\' class=\'bbc_emoticon\' alt=\';)\' />
Image
Josh
Hero Member
Hero Member
Posts: 4627
Joined: Fri Jun 04, 2004 2:54 pm

Floating column content

Post by Josh »

I\'ve got the same problem with KF :\ Sorry, I don\'t know either <img src=\'http://www.killanet.net/forum3/public/s ... #>/cry.gif\' class=\'bbc_emoticon\' alt=\':(\' />
[align=center]

Image

“If you stop learning, you stop living.” ~Tami Quiring

“It's the rare man who understands the value of a single perfect rose.”

[/align]
Josh
Hero Member
Hero Member
Posts: 4627
Joined: Fri Jun 04, 2004 2:54 pm

Floating column content

Post by Josh »

Yay for bumpage!

Has anyone ever gotten a fix for this? I have this problem now on my staff hosting and the only way I can think of fixing it is to put a crap load of
\'s lol
[align=center]

Image

“If you stop learning, you stop living.” ~Tami Quiring

“It's the rare man who understands the value of a single perfect rose.”

[/align]
Tami
Administrator
Administrator
Posts: 10892
Joined: Sun Apr 25, 2004 1:05 pm

Floating column content

Post by Tami »

In your main, underlying border, try setting the right side margin to -1px

This should make the border \"between\" the columns extend to the height of the column which has the most content, in this case your nav menu.

So Josh, on your CSS it looks like your < div id=\"content\" > would be the one to alter.

Give that a try and see if it works <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />

[i]*crosses fingers*[/i]
Image

[color=\"#41211C\"]It takes years to build up trust and only seconds to destroy it

[/color]
Josh
Hero Member
Hero Member
Posts: 4627
Joined: Fri Jun 04, 2004 2:54 pm

Floating column content

Post by Josh »

*uncrosses your fingers* El no worko! <img src=\'http://www.killanet.net/forum3/public/s ... #>/cry.gif\' class=\'bbc_emoticon\' alt=\':(\' />
[align=center]

Image

“If you stop learning, you stop living.” ~Tami Quiring

“It's the rare man who understands the value of a single perfect rose.”

[/align]
Tami
Administrator
Administrator
Posts: 10892
Joined: Sun Apr 25, 2004 1:05 pm

Floating column content

Post by Tami »

okay...this will keep the tables even; text placement is your problem <img src=\'http://www.killanet.net/forum3/public/s ... >/blum.gif\' class=\'bbc_emoticon\' alt=\':P\' />

[code]<head>
<title>Column Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
#layoutLogic {
width: 100%; }
.section {
display: block;
margin: 0 auto;
width: 80%; }
.col-A, {
float: center; }
.col-B {
float: top; }
.col-A {
display: block;
text-align: middle;
margin-right: -1px;
padding-right: 5px;
width: 80%;
border: 1px solid black; }
.col-B {
display: block;
padding-left: 5px;
width: 25%;
border: 1px solid red; }

.clear {
clear: both; }
--></style>
</head>

<body>
<div id="layoutLogic">
<div class="section">
   <div class="col-A">
     <div class="col-B">
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
</div>

</div>

<br class="clear">

</div>
</div>
</body>
</html>[/code]
Image

[color=\"#41211C\"]It takes years to build up trust and only seconds to destroy it

[/color]
Scott
Administrator
Administrator
Posts: 1651
Joined: Sun Apr 25, 2004 1:08 pm

Floating column content

Post by Scott »

Ada is teh css pwner o.0
Post Reply

Return to “Web Design Principles”