The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

border problem

The problem i have is obvious when viewed in ie and not in firefox...basically the divider bar are miss aligned on i.e. This would not be a problem if it was possible to make the two divs 100% height or something but i dont know how...Any ideas would be great.. (btw please dont suggest using images as i dont want that solution..needs to be easily editable and modified in css

if you want them to be the same, take out the border-left in your second column and replace it with border-right: double (instead of solid). However, that won't make IE drop to the bottom. IE is really a bugger when it comes to that.

You can also set a min-height using pixels.

I'm not entirely sure either solution will work since css for me is often trial and error.

Linda Jenkinson"Say what you mean. Mean what you say. But don't say it mean." ~Unknown

That kind of works...but now there is spacing to the right side....im sure there is a method to make the heights 100%...i just do not know how to do it...i dont want to make my divs too complex, and i dont get it when people do inner divs outer divs etc...all too complex..

The above version has a very strange css format...can someone give me a hand it making it more user friendly with names, im trying to figure it out but it always screws up. why they use such crap abbriviations is beyond me.

The thing is that i have changed the naming, but the css that is used seems overlapping and not in an easy to understand manner...would it be to rude of me to ask if you could assist in changing the naming for me...i will miss somethign and prob screw it up...

<div class="aur">
<div class="aul fc">
I know you said the above two are autowidth margin right but can you explain their purpose please...

Thanks a bunch for helping me...been trying to get templates sorted for ages :P

A single column with 3 floats in it
2 extra wrappers for the bgr colors, left column, right column
1 wrapper has a margin left as wide as the left float
1 wrapper has a margin right as wide as the right float
The floats are drawn in place by a negative left / right margin, (as wide) as the l/r floats

The third float is 100% wide so that is adjusts to the main width class w (change w in wx and the model adjust to full screen)

Oh i see...so the two wrappers with the left and right margins actually keep the central div in place, where the divs containing the text are positioned above the wrappers. Then the central div is "Squashed" to fit inbetween. Would you say that the jist of it..if so thanks for explaning well...

left_column use left-column
selectors should begin with a letter and contain only letters (A-Z, a-z), numbers (0-9), and the hyphen character (-). The CSS2 specification allows more (such as escaped characters) but these are not recommended due to style and compatibility reasons.