Float problems. | WPDFD.com Forums

Kaa said:

04/22/04, 113 23 2004 2004:%i:1082636585 08:23:05

Hello there. This was the first time I've done any CSS before but I think I'm getting the hang of it, kind of

Basically I'm just trying out a few layout ideas and I tried using floats for placement. Here's the html of it:

[pre]

test layout

logo

cover

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non ipsum a nisl lacinia pulvinar.
Proin accumsan. Maecenas id odio. Praesent dictum. Cras malesuada. Aenean blandit vehicula diam. Phasellus feugiat fringilla pede.
Suspendisse tempor nunc in dolor. Quisque lorem ipsum, venenatis quis, interdum vel, mattis nec, lacus. Aliquam erat volutpat.
Morbi ut enim. Quisque tristique quam id risus. Curabitur vel quam sit amet purus viverra dapibus. Ut at lectus. Aliquam malesuada est
eget sapien. Aliquam volutpat tortor non odio. Vestibulum dapibus velit a dui facilisis vulputate. Nullam placerat. Maecenas dignissim
vestibulum sapien. Pellentesque pede ligula, congue at, scelerisque eu, imperdiet sit amet, tellus.

[/pre]

This almost works perfectly in internet explorer (apart from the sidebar not being the same size as the content box).

In Opera the sidebar problem is there and the menu bar seems to stick to the top of the page.

In firefox the page looks awful, although the dimentions of the boxes seem to be correct (even the sidebar was renered as it should have been, which is nice).

Your help would be much appreciated, thanks.

Baxter said:

04/22/04, 113 44 2004 2004:%i:1082641485 09:44:45

Couple of things:

Floats must come BEFORE the stuff they're floating next to. So sidebar right must come before the other stuff.

You've assigned several things a z-index of 2, which is basically asking them to occupy the same space. Probably not your problem, but not really something you want to do, either.

The misized boxes sound like an IE box model problem.

Kaa said:

04/24/04, 115 10 2004 2004:%i:1082844637 18:10:37

Thanks for the help baxter. Seemed to have fixed a few things. But I have a whole new problem now :

The problem I have is that I have two columns side by side, One for content and one for other stuff (like polls and things) and I wish to have them the same height. Their height depends on their contents, but I want both columns to adapt to the column with the larger content.

So what I want is to make the right column the same height as the left column. Usually (but not always) the content of the left column is taller than the right.

And also I want the whole page to be in one giant box, which adapts to the size of the content.

I'm banging my head against the wall trying to figure out how to do this, I'm sure I'm going to kick myself when I find out how it's done.

I know I could use an HTML table to do this, but that's what I'm trying to escape with css (*rembers using invisible gifs for layout *)

Joe Gillespie said:

04/25/04, 116 42 2004 2004:%i:1082882575 04:42:55

I'm not sure what you mean by two columns the same height. The only way you can get two columns of text the same height is to put the same text in them. There's no concept of column-flow in HTML or CSS so the bottom edge of any text will be at an arbitary position depending on the number of words and text size.

http://www.wpdfd.com/editorial/wpd0403b.htm#feature shows how I turned WPDFD from a table-based to CSS-based layout with two columns - actually, there are three but one is only for the section headers.

The is an overall div for the whole page which is a fixed width but says centred on the window because the margins are set to auto. You can do the opposite, fix the margins and make the div stretch if you like.

If you put two 'float: left' coumns inside that with their witdths set to 50%, you will get the fluid two column layout.

To get text to line up in left and right columns, I break the columns up into shorter ones with a full width 'spacer' div that gives a new top for each pair of columns. The diagram should be self explanitory.

To provide the illusion of the left and right columns being the same height, you can put a footer at the bottom (or one on each side like I do on the WPDFD home page. That way, you get white space making up the difference in column lengths.

Kaa said:

04/25/04, 116 52 2004 2004:%i:1082919127 14:52:07

Thanks for the reply, it wasn't quite what I was getting at but I did learn something from it at least, I didn't know you could center elements by setting margins to auto, I had previously been wrapping a div around everything and setting align to center, so I'll try using this new method.

Hmm... I guess the best way to explain what I'm on about is to use a drawing:

(gotta love MS paint ;D)

It's probably not possible to make an element's height behave like that, but is there a way to at least make it look like this?

Thanks in advance.

(by the way, I decided to scrap the code I made at the begining of this thread, I've made a new version at http://www.boomspeed.com/houseofbobat/template.html, now it works in all the main browsers... I think)

Joe Gillespie said:

04/25/04, 116 35 2004 2004:%i:1082928902 17:35:02

As far as I can see, you only have a problem if the columns have background colours. If you leave one of the columns with a transparent background, then you can't tell that they aren't the same height.

Realistically, the only way to get what you are after is with tables but if that's what you want, then use a table, it can still be valid, it's not a crime! Some designs still require the use of tables and certain functions, such as valign="center" or valign="bottom" are still not easily achievable in CSS.

Kaa said:

04/25/04, 116 53 2004 2004:%i:1082933596 18:53:16

Yeah, I thought I'd might have to use a table to get that effect. Although I could experiment with that idea of transparent backgrounds and have the content and the sidebar in one giant "block" or something. Thanks for the help anyways.

Kaa said:

04/25/04, 116 50 2004 2004:%i:1082937018 19:50:18

Hang on, I think I've actually done it!

What I did was make a div element wrap around both columns and give it the colour of the background I wanted for both columns. Then for the content column I set the border-right to the same colour as the background colour. And I made the sidebar transparent (as you suggested).

The result is the illusion that there are two separate columns which are the same height. I've put it up here: http://www.boomspeed.com/houseofbobat/template.html

The only way I can see this method failing is if I want to make the columns a different colour.

Either way, I've managed to do it, thanks for the help guys! ;D

Joe Gillespie said:

04/26/04, 117 54 2004 2004:%i:1082966083 03:54:43

To make the right column a diffent colour, you can use a background image for the wrapper div. Just a sliver of a GIF with two colours the correct width and set to repeat-y would do the trick.

Kaa said:

04/26/04, 117 44 2004 2004:%i:1083005075 14:44:35

Ah excellent, looks like I've managed to get the layout I wanted. I'm beginning to like all this css now. Thank you for the help everyone.

Baxter said:

04/27/04, 118 44 2004 2004:%i:1083095099 15:44:59

Yes, putting a background for BOTH columns on the background wrapper div is probably the most common, and easiest way, to get full-height columns. There's also some neat solutions that use a clearing element (say,
to do it, but they're a little harder to wrap the old bean around.

Jason_stanfill said:

05/12/04, 133 29 2004 2004:%i:1084390144 15:29:04

the background image is a great solution and is described more at A List Apart http://www.alistapart.com/articles/fauxcolumns/