Web Hosting Talk







View Full Version : Column not floating left unless fixed width specified


ideaessence
01-17-2010, 03:35 AM
The person I have been creating this site for wants a liquid layout. He didn't say it in those words but he said it only takes up about 1/3 width of his monitor. I have taken this fixed layout
http://www.ideaessence.com/revision/
and almost re-coded it into a liquid layout here:
http://www.ideaessence.com/new/

But not quite. I have one big problem left, the content is not scalable. It is still a fixed width. If I make it scalable, then "float:left;" stops working for the content and it goes below the navigation instead of to the right.

Is there any CSS fix for it? If not, could a table easily solve the alignment problem?

Thanks.

colbyt
01-17-2010, 12:57 PM
It is fluid down to the 943PX defined lower limit.

.outer {
min-width: 943px;
width: 94%;

Did I not understand your question?

Host Ahead
01-17-2010, 02:37 PM
Hi,

I too think that it's fine the way it is. Fluid until the minimul width.

I'm testing in IE8 though, I don't know what it does in IE6. As I remember well the min-width doesn't work in IE (at least not in 6 and 7, don't know about 8).

BTW: Why would the client rather have a fluid lay-out? I'm having a 1920x1200 resolution here, and I certainly don't like to read from one end of my screen untill the other. I find it much more readable if lines are not lengthy.

ideaessence
01-17-2010, 02:44 PM
I was tampering with it at about the same time you posted up until now. It has changed yet again. The problem is solved. A couple points worth noting:

- I was wrong about it not floating. A percentage width specified will still float. The column showing up below another column had to

- Instead of floating the DIV called content, the CSS was replaced with:
#content {
margin: 0 0 0 220px;
}

ideaessence
01-17-2010, 03:00 PM
Any opinions on what I should do with the header? Center it? Left align it?

Host Ahead
01-17-2010, 03:33 PM
I'd pull it apart, meaning, put the text on the left and the image on the right.

I think it keeps your page as a whole, otherwise, you have some blank space on the sides.

Furthermore, I'd make the background of the image transparent, looks nicer I think

ideaessence
01-17-2010, 04:48 PM
I pulled it apart. What do you think? Any minor adjustments that might help it a bit, or is it perfect how it is?

Host Ahead
01-17-2010, 05:47 PM
Hi,

I like it this way. But one thing you might do, is make the right image with a transparent background.

I attached a file where I removed the background.
NOTE: I just did this very quickly in photoshop, if you have the original file, you can probably do it a lot faster, and better.

If you need any help, let me know.

ideaessence
01-17-2010, 05:55 PM
Thanks. This is not my layout, so I do not have the original image. I'm just re-coding the layout a bit to make it work in different browsers and alter it to suit the lawyer. Interestingly enough, I did E-Mail the original designer requesting the original image, so I'm waiting on it. (I'm paying the author 10USD to remove the credit link.)

In Internet Exploder, the gradient of that image does not match the gradient image of the background. In Firefox, it looks great. Is this the problem you're aiming to fix? Does transparency worked for png images fairly universally?

Edit: Ok. I found the original image a lot via Google Image searching:
http://images.google.com/images?hl=en&source=hp&q=law+scale
I'm not sure if the author just took one of those and blew it up to a larger size or what.

I'm taking the image you gave me and setting it specific to Internet Explorer with conditional comments.

Host Ahead
01-17-2010, 06:05 PM
Indeed, that's what I'm aiming at.

.png transparancy is supported from IE7 and up and I believe Firefox 1.5 or 2.0 but I'm not sure on that last one. If you want compatibility with IE 6.0 you should use transparent GIF's.

My policy is to quit support for IE6.0 . I think it's the only way to get rid of that monster :-)

ideaessence
01-17-2010, 06:41 PM
Could you upload a gif version of that?

I know IE is frustrating (thus the "Internet Exploder" I chimed in this thread) and I abandoned any support for IE 5.5 down, but I still want it to look OK in IE 6.

Host Ahead
01-17-2010, 06:45 PM
Here you go

ideaessence
01-17-2010, 06:47 PM
Excellent. Thanks again.

ideaessence
01-17-2010, 07:45 PM
You statement about quitting support for IE reminded me of something you might find funny. I had that attitude with Netscape and specifically for Netscape, I had a background image that said, "Upgrade time! Upgrade at WEBSITE!"

I somehow doubt I ever got a Netscape user anyways. I think my friends got a kick out of it and that's about all it was good for.