/    Sign up×
Community /Pin to ProfileBookmark

floated div positioning problem

In IE page displays ok however in Gecko divs are whacked. See [URL=http://www.lcshome.org/ie.pdf]pdf[/URL] as well as [URL=http://www.lcshome.org]site[/URL] if anyone has any ideas im all ears. thanks

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@SamMar 25.2004 — your site breaks a lot, even as low as 800x600 the right nav jumps down below the center div, and at 640x480 the center div jumps below the left nav... I'd suggest fixing these problems first, and I'd imagine that would fix the remainder of your issues...
Copy linkTweet thisAlerts:
@VladdyMar 25.2004 — You have two divs that float left, combine them into single block "leftcolumn" and float just it.

Also see this demo page I made using a three column layout that does not use floats: www.vladdy.net/Demos/ElementSizing.html

The argument for the floating side columns is that when a screen gets too narrow the blocks will stack one above the other. My point is: if a screen is that narrow (which in most cases would be <600px) it should be handled with a @media handheld stylesheet.

Note that you can set the width of your image in either font units or in percent - the height will be scaled automatically and your image will no longer be the stumbling block in layout fluidity.
Copy linkTweet thisAlerts:
@lcscneauthorMar 25.2004 — [i]Originally posted by Vladdy [/i]

[B]You have two divs that float left, combine them into single block "leftcolumn" and float just it. [/B][/QUOTE]

very good
[i]Originally posted by Vladdy [/i]

[B]The argument for the floating side columns is that when a screen gets too narrow the blocks will stack one above the other. My point is: if a screen is that narrow (which in most cases would be <600px) it should be handled with a @media handheld stylesheet [/B][/QUOTE]

1) so do you write device specific CSS?

2) do you personally use position instead of float in a 3 column layout?

[i]Originally posted by Vladdy [/i]

[B]Note that you can set the width of your image in either font units or in percent - the height will be scaled automatically and your image will no longer be the stumbling block in layout fluidity.[/B][/QUOTE]

I did not know that but that ranks as one of the most practical pieces of info I've learned this year, excelent info.
Copy linkTweet thisAlerts:
@VladdyMar 25.2004 — currently I limit my CSS to "screen,projection" so that handheld devices get unstyled content.

When there is significant amount of handheld users (and their browsers are more compliant) I will start creating handheld stylesheets as well. If I had a project that was geared towards handheld users I would design a handheld specific stylesheet now.

I prefer to use absolute positioning for the 3 column layout. (my homepage has the right column floating, but that is an artifact from an early design intent that I never got to implement and did not have time to change it to absolute positioning.

You can make your image the exact width of your content if you specify position:relative for your content. It will make the child elements of your content use its width as a reference to calculate % width:

<div id="content" style="position:relative">

<img src="mypic" style="width:100%;" />

Just be aware that using this approach the quality of the image will decrease if your original image resolution is low, and it gets streched more than 2-3 times on a big screen.
Copy linkTweet thisAlerts:
@lcscneauthorMar 25.2004 — Ok, I have 3 absolutely positioned containers that I'm not all that wild about but I can work with it for now (ok for 800X600 but lots of open real estate in 1024X768). However by going absolute my footer paragraphs now overlap the content column. What I don't understand is why it bumps the bottom of the left column and not the lowest one (on the home page the content column is lower than all others and probably will be on most).

Ok this is weird too, Gecko has the footer paragraphs overlaping all 3 and bumping I don't know what. Not sure why Gecko has decided to render the paragraphs where it did.?
Copy linkTweet thisAlerts:
@VladdyMar 25.2004 — You only use absolute positioning for the side columns. Then your footer will follow the center one.

Once again see the demo page I linked for an example. It describes the technique.
Copy linkTweet thisAlerts:
@lcscneauthorMar 25.2004 — Ok Sir,

I'm very pleased with the site's style now. I've implemented the two absolutely positioned side bars and the full width content area with margins and setup the body's position and width. This gives me the style I've been longing for (I know you told me that 3 messages ago). However, your probably not going to want to hear this but this layout is incompatible with your CSS menu in that the absolutely positioned ul subs protrude out from the absolutely positioned nav bar. If you revisit my site you'll see what I mean. If I remember correctly child elements inside an absolutely positioned parent are restricted to the parents borders. Anyhoo, I'll work on it tomorrow, hopefully there is a solution, I don't want to ditch the menu. It is by far the easiest to understand and I think requires much less bandwidth as well as less CPU work. I really appreciate what you do here for all of us.
Copy linkTweet thisAlerts:
@VladdyMar 26.2004 — hmm... which page are you refering to? I did not see any problems with home page...
×

Success!

Help @lcscne spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...