I have a problem with the website below, which I've built...

www.warwickshire-webdesign.co.uk/go2tanzania/

It looks the way I want it to in I.E. but the text fails to wrap when viewed in Mozilla.

I've managed to solve this problem, which can be viewed at the following link...

www.warwickshire-webdesign.co.uk/go2tanzania/new/

However, the text now moves down the page as the menu on the left expands...

I've tried moving things around as much as appears possible and I just seem to be going round in circles.

Could anyone explain an easy solution to this, such as forcing the width of the table to stay the same in Mozilla etc? This way I can use my original version...

Any help much appreciated, else I'm going to have to try and build the whole thing from scratch and try to work out where I've gone wrong!

Thanks in advance!

Hi
I took a quick look, can see what you mean, I am viewing with FF on a Mac

You have 3 divs on the page, an outer container, then a menu div that floats left, then div 3 that is not floated. Without picking the css apart it looks to me like div 3 is showing correctly according to the css that you have. The menu div floats left, that takes it out of the normal page flow, but then everything after it goes in and flows normally. When the menu expands div 3 has to go below it

If you change the page layout to a header div, then two columns each being a div with one floated and the other having a margin it should work - something like this -

<pre id=code><font face=courier size=2 id=code>div#maincontent {
padding: 4px;
text-align: left;
margin-left: 45%;
margin-right: 20px;
}

div#leftcolumn {
padding: 4px;
float: left;
text-align: left;
width: 35%;
margin-right: 10px;
margin-left: 10px;
} </font id=code></pre id=code>

First of all, thanks for the reply... Very appreciated!

It seems to me that there is only one set of div tags in my original site which stretches across the page and two sets of div tags in the second version.

I don't know enough about div tags to use my own initiative to acheive what you're asking, so I'm currently checking out some tutorials on the use of div tags.

I will let you know how I get on, once I know what I'm doing...

Thanks again for the reply...

good stuff, try a search on 2 or 3 column layouts in css, you should come up with a lot of interesting pages, the hardest thing will be sorting out which ones are worth your while evaluating.

I spent ages doing it and somewhere have a load of bookmarks I could dig them out but by now there are probably better ones <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

Sorry it's taken me a while to get back to you... I've had other projects on!

I've re-done the site as you suggested... You've been a great help!

The URL above ending in /new/ should now look ok on your machine...

However, I now have a problem with keeping my columns at the same length...

I had a search around and seems most people with this problem are bodging it in ways that arn't possible for the design of my site.

Surely there's an easy way to anchor the two columns to the bottom of the containing table?

Below is my CSS encase it helps...

@charset "utf-8";
/* CSS Document */

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}

html {
margin:0;
padding:0;
}

body {
min-width:800px;
}

#wrap {
margin:0 auto;
width:800px;
}

#header {
background:#CA5B11
}

#nav {
border-left:none;
border-left-style:none;
border-right:none;
border-right-style:none;
margin-left: -2px;
}

#main {
height: 100%;
float:right;
width:565px;
}

#topimage {
margin-left: 1px;
float:left;
}

#topflash {
float:right;
margin-right: 1px;
}

#maintext {
height: 100%;
clear:both;
}

#footer {
background:#FAEFE5;
clear:both;
}

#sidebar {
background:#CA5B11;
float:left;
width:235px;
height: 100%;
}

#lowerside {
height: 100%;
clear:both;
}

a:link {
text-decoration: none;
color: #CA5F22;
}
a:visited {
text-decoration: none;
color: #CA5F22;
}
a:hover {
text-decoration: none;
color: #602600;
}
a:active {
text-decoration: none;
color: #602600;
}


a:link.top {
text-decoration: none;
font-weight:bold;
color: #FFFFFF;
}
a:visited.top {
text-decoration: none;
font-weight:bold;
color: #FFFFFF;
}
a:hover.top {
text-decoration: none;
font-weight:bold;
color: #602600;
}
a:active.top {
text-decoration: none;
font-weight:bold;
color: #602600;
}

a:link.other {
text-decoration: none;
color: #FFFFFF;
}
a:visited.other {
text-decoration: none;
color: #FFFFFF;
}
a:hover.other {
text-decoration: none;
color: #CA5F22;
}
a:active.other {
text-decoration: none;
color: #CA5F22;
}

As you can see I've stuck alot of "height: 100%"' in there in hope it would work, but with no luck.

If you could point me in the right direction again, it would be much appreciated...

Cheers!

Hi again,
That page looks really good now, well done!
I'm not just sure which columns you want to have equal length, is it the main sidebar where your navigation is?

One way you can fill it is to add a background image, the image itself can be quite small, then tile it vertically, that way it will fill whatever space is there, but that will not pad of the column to the same length as the others.

Just taking a quick look at the page source and css on your production site I don't see the 100% heights, but I do see a lot of table cells, it could be that the mix of table and css is causing some issues. However the overall result look good. Have a look at something I'm working on at the moment where I've done the menus as pure css, it will be moving off to the production site soon but it's going to be there for a little while pending a few issues

listentothepeople.co.uk

If you are working on a mac then a really great piece of software for visualising and editing you css is cssedit a quick search will get the url for it. Using that I could see the tabular layout. Another really good thing is to get the developer's toolbar for firefox, that works on both pc and mac and lets you inspect and change things on the fly.

Thanks…

It’s the Side Bar Div that floats left that I want to stretch to the same height as the Main Div which floats right and vice versa.

The Pink Footer should always line up with the Black Bottom of the Side Bar Background Image as it does for the Home Page at the moment.

www.warwickshire-webdesign.co.uk/go2tanzania/new/

I’ve bodged that with a spacer image, but if you click National Parks for instance you will see my problem… The footer drops down to allow the extra content and the side bar also expands slightly to allow the extra menu options. However, it doesn’t expand enough, leaving a large amount of blank space, which makes the shadow look ridiculous for starters.

I hoped it would be as simple as setting the Height of the Side Bar Div to 100 %... That has no affect!

I already have a Background Image for the Side Bar Div, which is the one I mentioned above that I need to sit at the bottom, so I can’t see how I can use the Background Image trick. Also, the Side Bar column clearly isn’t stretching so even if I put a Vertically Tiled Background Image in… Surely it wouldn’t help? Unless however there’s another Div that sits behind it on a different Z index with perhaps a Black Background so that any space below the Side Bar Div is filled with Black, which will match the bottom of the Side Bar Div Background Image.

This still wouldn’t help for instances where the Side Bar Div is longer that the Main Content, because the Pink Footer would still be sitting higher up…

However, if the above is possible I may have thought of a work around, where the Footer stretches the whole Width of the Page, but is split so that the left side is Black, giving the impression that it’s still 2 columns. That way the bottom of the left column fills with black and the right with white.

I think I know what I’m doing to achieve what I’ve mentioned above, but if you can think of any obvious floors or better solutions, please let me know…

Cheers!

P.S. There were already issues before I added the containing table with the shadow… I hoped that might help!

Sorry if I've confused you, but I've already made the changes I mentioned above, so it won't make much sense now...

I still prefer the way the left hand column background image behaves when the column lengths change in my original, but it will be difficult to see how it works unless viewed in Internet Explorer...

Original... www.warwickshire-webdesign.co.uk/go2tanzania/
New... www.warwickshire-webdesign.co.uk/go2tanzania/new/

If anyone reading this knows a way to force equal heights for two floating div's, please let me know...

Thanks in advance!

hi, just dashing off - my boiler has packed up and it's cold <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>

this might be worth a try

www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

there are some positive feedback comments, I'm going to test it myself, generally I try to keep off the javascript unless I really need it

Initially it seems to work great with a slight miss placement of the Background Image in I.E, but if you correct it, it causes the same problem with Mozilla.

I’ve also noticed it not working at all on certain pages in both browsers, so maybe it’s best if I settle for what I’ve achieved so far, as I seem to be going round in circles.

I’m sure it would be a very useful tool for some people and I will probably use it myself at some point.

Thanks again for all your help…

Much appreciated!

Meant to post a link so you could see the results...

www.warwickshire-webdesign.co.uk/go2tanzania/test/

Just uploading now, so check back later if the link doesn't work.

Cheers!