/    Sign up×
Community /Pin to ProfileBookmark

column height problems

The below code sets up my page and set the min column heights. I want all rows to re the same length. The problem I’m having is it not expanding the column lengh when the page is longer then 600px

any help is excellent

[code]
#bodyblock {
position: relative;
color: #848484;
width:750px;
/*margin-top:-25px;*/
padding:0;
min-height:600px;
left: 3;

}

* html #bodyblock{
height: 600px;

}

#l-col {
float:left;
padding-top:10px;
border:2px solid #EFF7C0;
color: #848484;
width:145px;
min-height:600px;
}

* html #l-col{
height: 600px;

}

#cont {
width:595px;
padding-top:10px;
float:right;
background:#ffffff;
color: #333333;
border:2px solid #EFF7C0;
text-align:left;
min-height:600px;

}

* html #cont{
height: 600px;

}
[/code]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@kprocauthorJul 31.2007 — Here is the page layout with the divs.

any help is excellent

<i>
</i>&lt;div id="outer"&gt;
&lt;div id="hdr"&gt;
&lt;!--Header--&gt;

<i> </i> &lt;/div&gt;

<i> </i> &lt;div id="bar"&gt;
<i> </i> &lt;!--Subheader--&gt;
<i> </i> &lt;/div&gt;

<i> </i> &lt;div id="bodyblock"&gt;
<i> </i> &lt;!--body Lock--&gt;

<i> </i> &lt;div id="l-col"&gt;


<i> </i> &lt;/div&gt;

<i> </i> &lt;div id="cont"&gt;
<i> </i> &lt;!--Main Content--&gt;
<i> </i> &lt;/div&gt;

&lt;/div&gt;
&lt;div id="ftr"&gt;

<i> </i>&lt;/div&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@CentauriJul 31.2007 — Equalising column lengths with css can be very frustrating. As the equal column length is [I]visual presentation[/I], there isn't [B]really[/B] a need to actually have the colums themselves the same length, rather it needs to [B][I]look[/I][/B] like they do.

There a few methods to do this - some involve javascript, whilst others use clever cheats to achieve the look. The cheat methods involve not having a background on the columns themselves, rather backgrounds on a container surrounding the columns. One method involves wide borders on the container that the columns sit within, and is the method used by Stu Nicholls here - view the source of the example page to see how it works. Another method uses a repeating background image on the container - the so-called "faux column" method described here.
Copy linkTweet thisAlerts:
@kprocauthorJul 31.2007 — Thank you for the post I'm still fighting this one. For some reason the cont div is running over top of the footer div.

I read the links that was provided but I'm having a hard time establishing a way to set min height and let the page expand in length when needed
×

Success!

Help @kproc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...