FORUMS: list search recent posts

negative margins in css dilemma

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Bret Williams
negative margins in css dilemma
on Aug 2, 2007 at 8:38:11 pm

Hey Abe, good to see you're in here!

I'm working on making all my sites css based instead of tables, but I've found an issue. I like to center pages horizontally and float elements and such. So some of the tricks I've learned is to center things within a div, then use negative margins for other elements to push them to the left, or positive margins to push things to the right. Works well if your center element is a set width.

Here's the problem page... a work in progress. hownet.com/blog

If you shrink the window width (like an iphone would be when zoomed in) you'll see that the negative margin stuff goes off the left of the screen and you can't pan over to it. It's just off screen. So, anyone with a 640 or 800 screen is going to have issues.

Anyone know of a better way?


Return to posts index

Abraham Chaffin
Re: negative margins in css dilemma
on Aug 2, 2007 at 8:58:34 pm

Hey Bret,

I looked at the page and I'm not sure exactly what you are shooting for. Right now the top image and main body doesn't scale when you shrink it down, so I'm wondering if you are wanting it to shrink based on window size or just have the ability to scroll to the right.

If you want it to shrink you should be using a percentage based system and if you just want it to scroll then you want to center everything but set the width and positioning. I wouldn't use absolute positioning for the entire body of the page as it's not necessary and leads to problems.

I tend to lean more towards using css with tables instead of divs because tables tend to be handled more uniformly by all browsers imho.

Abraham


Return to posts index

Brian of Influx media
Re: negative margins in css dilemma
on Aug 2, 2007 at 9:04:47 pm

tables should not be used for any layout purposes anymore, they need to go away and be used for presenting "data" as they were intended. I know its difficult to get over the table bases layout gene, trust me, It took about 6-8 months of drilling CSS into my head to do it, but once you do...man its heaven ;)



Brian Artka

http://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design


Return to posts index


Abraham Chaffin
Re: negative margins in css dilemma
on Aug 2, 2007 at 9:13:00 pm

Hey Brian,

You're probably right as I know the purpose of divs was to replace all the problems that come along with using divs - I just found using tables so much simpler to position everything and not have things blow out or not work properly on different browsers, resolutions, and such.

Appreciate your feedback though and will continue honing my skills with divs.

Abraham


Return to posts index

Bret Williams
Re: negative margins in css dilemma
on Aug 2, 2007 at 9:50:38 pm

Yeah. But as I mentioned to your other post, things like 3 columns aren't so easy. One big issue I forgot to mention is having 3 columns that automatically ALL stretch, and all have different background colors or images. Having a footer at the bottom below all 3 like in my example made it even more difficult. Learning to clear the float styles was of particular help. But that bottom footer div has to move down when ANY column gets longer. AND when any of the 3 columns get longer, the other 2 need to as well. It didn't sound that tough until I had to implement it to duplicate my table layout, which of course took all of 3 minutes to do what I wanted. Go figure.


Return to posts index

Brian of Influx media
Re: negative margins in css dilemma
on Aug 2, 2007 at 9:02:45 pm

hi B,

If I am seeing your example page right, you are using divs seperately aligned via negative left margins to center them all horizontally. There is a much easier way to do this. Make div called "container" and put EVERYTHING you have already inside of that. Then apply the following CSS to that "container" div:

#container {
text-align:center;
margin: 0 auto;
width: 875px;
}

This will contain all the other divs, and all the other content inside of the "container" and whatever size the browser is resized too wont matter as long as the container is holding the content.

You might have to change some properties of the divs inside, for instance, all the negative divs will have to be changed since now these divs are child divs of the "container" div, not the body element. let me know how it goes.

Brian



Brian Artka

http://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design


Return to posts index


Bret Williams
Re: negative margins in css dilemma
on Aug 2, 2007 at 9:46:54 pm

I think I was on that route, but was having some issues. Perhaps those issues were related to the 3 column layout difficulty. I've quite proud that I was able to create a 3 column layout that is issue free in all browsers I've tested. Except for the one about panning left and right of course.

If you search the internet for divs and 3 column layout, you'll find a couple strategic websites that make it possible. Some via very difficult and complex methods. Especially difficult if you want the whole thing to be liquid or float in one place.

I guess I'll see if I can rework the negative margins. They're just so handy!


Return to posts index

Brian of Influx media
Re: negative margins in css dilemma
on Aug 3, 2007 at 3:04:55 am

Hi Brett,

Yeh, I have to admit that some things are pretty difficult to do especially when browsers are not consistent. Try to use this page i threw together as an example to use on your website you mentioned in this post:

http://www.influx-media.com/3coltest.html

This was tested in IE7 and IE6, and firefox. I'm pretty sure it will work with other standard browsers. We dont even try to adapt to anything below IE6 anymore on 90% of our projects, unless the client requests an older browser support.

Anyway, this layout consists of container holding the header, 3 columns (each a div) and a footer. The header is first in the container, then the left col, center col, right col, which are all floated LEFT. Last in order, is the footer, which is set to clear: both. It really only needs to clear left, but both is used in case later one were to play with a right float.

To take care of your background colors being different even when one column grows, and the others dont, I used a faux column approach. The container div has a repeat-y background image that is split into 3 colors and lengths to match the columns. that way the colors will all be the same when the content grows in a div.

Look at the code too, order of each div in the container DOES matter when you use floats. The reason they are all floated left is that one will bump right up next to each other starting at the left-most edge of the container. The container is set to always be horizontally center no matter what the size of the browser viewport and if you make the viewport small, the floats do not move and you can pan right across them without any breaking issues. Thats the beauty of the container div.

Thats all I'll say for now, if you use this, and it works out, let me know. There are tons of other ways to arrange your content in the container and divs once you get the basic layout done.



Brian Artka

http://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design


Return to posts index

Bret Williams
Re: negative margins in css dilemma
on Aug 3, 2007 at 4:06:52 pm

That's exactly what my page does. It has a container, wrapper. Then a couple header sections (which never wanted to be consistent, so I absolute positioned them from top - which causes the problems I guess) then the 3 column divs that are floated, then clear both, then the footer. I've got to just get that absolute positioning out of there because it's what makes me have to use the negative margins, which in turn screws up being able to pan left and see everything on a 800 or less wide monitor.

I'll try to adapt your code and see if it works. Sometimes just need fresh eyes. Thanks!




Return to posts index


Bret Williams
Re: negative margins in css dilemma
on Aug 3, 2007 at 4:16:22 pm

I think you made a good point. To heck with version 5.x IE. My design actually works in IE 5.5 mac! Due to the absolute positioning. But I was quite proud it looked exactly the same in FFox, Safari, and IE 5.5. I figure if you can do that, you're golden. But actually now, one of the Divs is too wide on the blog page. However it's still working on this page in IE 5.5 mac... http://www.hownet.com/enterprise but you still have the pan problem of course.

Your layout doesn't have the pan problem, but it breaks in IE 5.5, but as you pointed out who cares about 5.5. It's IE 5 that's actually broken. In fact, MSN is screwed up in IE 5. If Microsoft doesn't support their own broswer on their own site, why should I? :)

Oh, and yeah, I had to do a background gif to get the right hand column to have color all the way down. But there are web sites out there that try to tell you how to do it with pure css coloring. They use javascript et al. This is simpler. Maybe it isn't quite as easily adjustable because you have to change the background image, but no biggie.

So thanks for the wake up call. I'll just shoot for IE 6.x, Safari, and Firefox.


Return to posts index

Brian of Influx media
Re: negative margins in css dilemma
on Aug 3, 2007 at 4:44:30 pm

not a problem =)

I didn't get to look at the code you had absolute positioned, but is it positioned from 0,0 being the top left corner of the view port? or is it "relative" to the div (top left corner of the containing div) you are positioning from?

Brian

Brian Artka

http://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design


Return to posts index

Bret Williams
Re: negative margins in css dilemma
on Aug 10, 2007 at 7:22:21 am

Finally got it all working without negative margins or any positioning. Just DIVS and floated DIVS. hownet.com/blog

It cleaned up the code quite a bit. Used your test as a starting point to re-adapt the design, but as always I had to come up with a few tricks to get a few particulars to work the way I needed. But finally no scaling problems and it looks acceptable in FW and IE and Safari. Always good.

I've still got one table in there. The main menu bar. It works so I'm too lazy to change it. I suppose it could be a bunch of floated left divs.

Thanks for the advice!


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]