Getting a column block size to equal another

P

Paul F. Johnson

Hi,

I have a CSS file setup which has 3 columns. The left column is set like
this:

#leftbar {
position: absolute;
float: left;
width: 20%;
border: 1px solid black;
color: black;
background-color: #f7f3f7;
display: block;
padding-bottom: 5px;
}

The middle...

#middleblock {
float: left;
width: 58%;
min-height: 250px;
margin-left: 20.1%;
padding-right: 18px;
}

And the right...

#rightblock {
float: left;
width: 20%;
background-color: white;
margin-top: 10px;
}

Is there anyway to ensure that the left margin is always the same size
as the middle block without resorting to JS? There probably is some
really simple way to do it!

TTFN

Paul
 
R

rf

Paul said:
Hi,

I have a CSS file setup which has 3 columns. The left column is set like
this:
Click to expand...

Is there anyway to ensure that the left margin is always the same size
as the middle block
Click to expand...

What left margin? Do you mean the left column? Well, no because you have
specified them to be different sizes.

without resorting to JS?

Which would be a bandaid approach at best.

There probably is some
really simple way to do it!
Click to expand...

It really depends what "it" is. Try rephrasing your question.
 
P

Paul F. Johnson

Hi
Paul F. Johnson wrote:


It really depends what "it" is. Try rephrasing your question.
Click to expand...

Okay, I'll rephrase it.

I'm trying to make the left column equal in length to the middle column.
If you look at http://www.refute-the-facts.org.uk you'll see the
problem; the bottom of the block needs to extend to the w3c icon, but
doesn't.

TTFN

Paul
 
B

Beauregard T. Shagnasty

Quoth the raven Paul F. Johnson:
I'm trying to make the left column equal in length to the middle
column. If you look at http://www.refute-the-facts.org.uk you'll
see the problem; the bottom of the block needs to extend to the w3c
icon, but doesn't.
Click to expand...

I've had a look at that page with Mozilla, IE6, and Opera. It isn't
working in any of them. There is lots of text that overwrites /
overlaps other text. Some deprecated markup as well.

While you have your font-size correctly sized as 100%, I'd recommend
dropping the Verdana. Google for why.

Since you show the W3C icon, you will want to design and write it
correctly, no? The icon .. um, is not truthful ... <g>
 
P

Paul F. Johnson

Hi,
Quoth the raven Paul F. Johnson:
Click to expand...
I've had a look at that page with Mozilla, IE6, and Opera. It isn't
working in any of them. There is lots of text that overwrites / overlaps
other text. Some deprecated markup as well.
Click to expand...

I'll need to check it on IE at 800x600 tomorrow at work. I know it's
fine here on Firefox at 1024x768. There are issues on the CSS with IE.
Basically, it's fixed by fiddling around with widths.
Since you show the W3C icon, you will want to design and write it
correctly, no? The icon .. um, is not truthful ... <g>
Click to expand...

The icon is truthful as the page verifies on w3c.org
 
R

rf

Paul said:
Okay, I'll rephrase it.

I'm trying to make the left column equal in length to the middle column.
If you look at http://www.refute-the-facts.org.uk you'll see the
problem; the bottom of the block needs to extend to the w3c icon, but
doesn't.
Click to expand...

Much better. I can see what is hapenning now.

You will never get that column to be the same height as all the others,
indeed why would you? This is not how HTML works when styled with CSS. You
are stuck in a "table design" philosophy.

You *can* trick the viewer into thinking that the column goes all the way to
the bottom by applying a suitable 200 by 1 pixel background to the <body>
with background-repeat: repeat-y. The background is the same colour as the
left column and results in a vertical stripe the width of the column. You
may have to make it a little longer with a few white pixels at the left to
cater for the body margin.

brucie provided a perfect example of this a couple of days ago. Search the
group for his more-shit URLs.

BTW you have more problems than just this:

http://users.bigpond.net.au/rf/facts.jpg

Never put text in a fixed sized container and expect it to stay there. Your
viewer *will* change her font size, causing stuff to spill out everywhere.

Fluid is best, let the browser decide where to put those boxes.

Oh, and this page is broken in IE. The left column is at the bottom, after
all the other content.
 
R

rf

Paul F. Johnson
Hi,



The icon is truthful as the page verifies on w3c.org
Click to expand...

The page validates to transitional. These days you should be writing strict.

However, even though the page validates it is broken visually. I'm sure the
icon really means "this page uses valid HTML and it even displays properly"
:)

It does not. It is seriously broken in many browsers, including the most
used <spit/> one.
 
P

Paul F. Johnson

Hi,
BTW you have more problems than just this:

http://users.bigpond.net.au/rf/facts.jpg
Click to expand...

I think your cache needs updating. The text in the middle next to the
orange blob has been changed. I've also played with the style sheet
Oh, and this page is broken in IE. The left column is at the bottom, after
all the other content.
Click to expand...

Sure you don't mean the right column?

With luck, the latest version of the stylesheet should address quite a
few issues. This is fun, but it's time for bed.

TTFN

Paul
 
P

Paul F. Johnson

rf said:
It does not. It is seriously broken in many browsers, including the most
used <spit/> one.
Click to expand...

Works fine here in Konqueror, Opera, Moz 1.7.3, Firefox 1.0.RCsomething
in a pile of resolutions. Until it gets seriously silly in screen
resolution, everything looks workable.

Must check it in work tomorrow under IE. Unless doing that violates some
insane rule or other in viewing something which doesn't agree with the
edicts of Chairman Bill ;-p

TTFN

Paul
 
B

Beauregard T. Shagnasty

Quoth the raven Paul F. Johnson:
I'll need to check it on IE at 800x600 tomorrow at work. I know
it's fine here on Firefox at 1024x768. There are issues on the CSS
with IE. Basically, it's fixed by fiddling around with widths.
Click to expand...

I see you have made changes since I last looked. You fixed the overlap
at the top - just under the penguin. There is still overlap in the
text areas at the bottom of the page, near the W3C icon.

Note that it fails at 800x600. Reduce your browser window size and you
will see the problems. Not everyone has a large monitor or high
resolution.
The icon is truthful as the page verifies on w3c.org
Click to expand...

Now it is. It was not validating when I first posted.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I get my menu inside of a menu to function properly? 1
Help with my responsive home page 2
Why is the e.target not working here? 1
Help with Visual Lightbox: Scripts 2
I need help fixing my website 2
Working on mobile css menu with plenty of frustration! 2
SendGrid email issue in responsive Gmail 1
Is it possible an iframe can overlapp another? 3

Members online

Total: 29 (members: 1, guests: 28)
Robots: 321

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top