Some (maybe not so) Minor Alignment Questions

#1

I have 2 problems on my current page.

one:
I can't seem to get the LeftColumn and MiddleColumn
to align exactly next to each other so they seem connected.

two:
I want the left column to be the same height as the right column.
And, if the content in the left column's "Bottom" DIV exceeds
the length of the right column, I want the content in the DIV to
scroll (vertically).

Any guidance much appreciated.

thank you.

#MiddleColumn {
float: left;
margin: 0px -2px 0px 0px; /* not sure about these numbers
*/
position: relative;
width: 570px;
border: 2px solid #090; }
..ForceColumnsToExtend {
clear: both; }
#LeftColumn {
margin-top:35px;
float: left;
margin-left: -250px; /* width of the left column */
margin-right: 0px;
position: relative;
width: 235px; /* width of the left column */
border: 2px solid yellow; }
#PageContent
{
background-color: #fff; /* for middle column */
border: 2px solid purple; /* page background color */
border-left-color: #fff;
border-left-style: solid;
border-left-width: 250px;
border-right-color: #a0a0a0;
border-right-style: solid;
border-right-width: 2px;
width: 0%; }

#PageInnerContent {
margin: 0px;
width: inherit; }

#Top {
width: auto;
background-color: #C3D9FF;
padding-left:25px;
}

#Bottom {
background-color: White;
width: 100%;
overflow-y:auto;
overflow-x:hidden;
border:solid 1px orange;
}

<body id="body">
<div id="PageContent">
<div id="PageInnerContent">
<div id="LeftColumn">
<div id="Top">
</div>
<div id="Bottom">
</div>
</div>
<div id="MiddleColumn">
</div>
</div>
<div class="ForceColumnsToExtend"> </div>
</div>

#2

pbd22 wrote:

Quote:

I have 2 problems on my current page.

I bet you really have more than that, you just don't know it yet.

Quote:

I want the left column to be the same height as the right column.
And, if the content in the left column's "Bottom" DIV exceeds
the length of the right column, I want the content in the DIV to
scroll (vertically).

Stop wanting that, please. Scrolling divs have serious accessibility
issues. Just let the page scroll normally. It's what people expect, and
it works just dandy in every browsing situation.

Quote:

#MiddleColumn

Don't post code. Post a URL if you expect assistance.

--
Berg

#3

On Sep 23, 2:35 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:

Quote:

pbd22 wrote:
I have 2 problems on my current page.

I bet you really have more than that, you just don't know it yet.

I want the left column to be the same height as the right column.
And, if the content in the left column's "Bottom" DIV exceeds
the length of the right column, I want the content in the DIV to
scroll (vertically).

Stop wanting that, please. Scrolling divs have serious accessibility
issues. Just let the page scroll normally. It's what people expect, and
it works just dandy in every browsing situation.

#MiddleColumn

Don't post code. Post a URL if you expect assistance.

--
Berg

OK, thanks for your reply.
Below is a demo link. The appearance is rough but it illustrates what
I am trying to do (and the CSS I am currently using to try to get
there):

http://dushkin.googlepages.com/ColumnFormatting.htm

#4

On Sep 24, 5:03 am, pbd22 <dush... (AT) gmail (DOT) com> wrote:

Quote:

On Sep 23, 2:35 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:

pbd22 wrote:
I have 2 problems on my current page.

I bet you really have more than that, you just don't know it yet.

I want the left column to be the same height as the right column.
And, if the content in the left column's "Bottom" DIV exceeds
the length of the right column, I want the content in the DIV to
scroll (vertically).

Stop wanting that, please. Scrolling divs have serious accessibility
issues. Just let the page scroll normally. It's what people expect, and
it works just dandy in every browsing situation.

#MiddleColumn

Don't post code. Post a URL if you expect assistance.

--
Berg

OK, thanks for your reply.
Below is a demo link. The appearance is rough but it illustrates what
I am trying to do (and the CSS I am currently using to try to get
there):

http://dushkin.googlepages.com/ColumnFormatting.htm

Making something new is always easier than correcting something, so
simply take one of these layouts: <http://www.maxdesign.com.au/
presentation/page_layouts/> or <http://www.456bereastreet.com/lab/
developing_with_web_standards/csslayout/2-col/>.
And if you want to do it yourself: start from scratch, use background-
colors for your divs for debugging und just float:left for the left
column and float:right for the right column. And try avoiding unneeded
markup like nested divs everywhere.

--Julian

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Some (maybe not so) Minor Alignment Questions

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Some (maybe not so) Minor Alignment Questions - 09-23-2007 , 03:07 PM

Re: Some (maybe not so) Minor Alignment Questions - 09-23-2007 , 04:35 PM

Re: Some (maybe not so) Minor Alignment Questions - 09-23-2007 , 10:03 PM

Re: Some (maybe not so) Minor Alignment Questions - 09-24-2007 , 09:36 AM