Right Margin Woes - or something! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

michaelea -> Right Margin Woes - or something! (10/11/2008 2:36:32)

Can anyone point the way for me pls.?

Desired Results (Goals):

1)... Content div to appear BEFORE rightCol div in html - for SEO purposes
2)... Consistent whitespace - say 12px - in content div's right margin/padding
3)... Elastic Page (min:760 max:1200)

Page is at http://css.northcoastcomputerservices.com

Frustration:

1)... Watch the Content Div's right margin whitespace as you increase and decrease your Browser window!! (I've tried #content { padding-right: margin-right: ems, px and % } - all to no avail!)

2)... Floating the rightCol to the left (float:left) forces the rightCol Div to be placed ABOVE the Content Div in the html thereby making the rightCol first for SEO but, I do get the consistent content div rigght margin whitespace.

Question:

How do I get the contentDiv right margin whitespace to be consistent (across browser window widths) AND have the html contentDiv ABOVE the rightCol Div. for SEO purposes?

Can I have my cake and eat it too?!?!

Thank You.




Tailslide -> RE: Right Margin Woes - or something! (10/11/2008 6:44:33)

Sure you can.

Here you go: TEST PAGE

What I've done is simplify the markup and css slightly in some ways plus add the IE6 expression to give you max/min-width there too. Layout works fine back to IE5 (full width though - not major issue).

You've now got a layout that expands to 1200px and reduces to 760px wide. You'll note that the sidebar is now sized by % rather than a fixed width - this just makes life easier when dealing with fluid layouts to be honest. Proportionally it still looks good and it means that the main content text isn't too wide.

You'll note that both divs are floated the same way - this is to get around the IE float drop issue.



michaelea -> RE: Right Margin Woes - or something! (10/11/2008 11:36:29)

Oh my.

It's like having my own personal css trainer - coming round to my place for the inspiring workout - only better! Thank you for the lesson Tailslide.

(I wish my question had been more accurate: I should have mentioned that I wanted the right column fixed too but I will play with that seeing what difference the dinnerwrapper has made to the equation.)

Also, given that both divs are now floated left, is that going to give me headaches when I place 2 or 3 css boxes (<div id="box1">Click here to buy this</div>) in the middle of the content div? For, example what's going to happen with clear:left ? Won't the next block div after the css boxes be cleared to the bottom of the right margin rather than the the bottom of the content container?

Questions, questions.... I know there's going to be more questions on this one....hopefully they'll get answered in as timely, efficient, interesting, friendly, knowledgeable, succinct, precise, accurate and professional a manner as this one. I'll see where I get with this and Tail, thanks again so much for the workout!




Tailslide -> RE: Right Margin Woes - or something! (10/11/2008 11:52:12)

Hi

Yes I'd thought you'd probably wanted the sidebar to be fixed... but it's frankly easier just to have it fluid. I'm sure you can make it fixed but you start running into problems (as you've found!). As long as the max-width is reasonable I find it looks fine so I leave both fluid.

Have a look on Paul O'B's website here: http://www.pmob.co.uk/ he may have some other solutions for fixed widths within fluid.

Having both divs floated left won't affect floated divs within them (far as I can think anyway). The inner floats are contained within one of the floated divs. You can float these any way you like. When I make a 3 column layout (like my own site) I have an outer div holding two floating inner divs. One of these inner divs has two floated divs - thus making the 3 column effect.

Just float the 3 boxes within the content div and ensure that whatever follows it (e.g. a paragraph or a heading) has clear: both added to push it past the 3 floats. Shouldn't be an issue.

Oh btw - that example I posted was valid Strict [;)]



michaelea -> RE: Right Margin Woes - or something! (10/11/2008 13:33:01)

quote:

ORIGINAL: Tailslide

Oh btw - that example I posted was valid Strict [;)]


Yes, that did not escape me!

That comes up as an issue for me - as you no doubt noted - on my "trying to make a nickel through affiliate marketing" creative, banners and pages. Valid Strict is not partial to <a target="_blank" href....>

I am of the HO that it benefits my website's visitors to come back to one of my "deal of the century" pages so that they can click their next item of interest on my site's "deal of the century" list.

One of the more amusing alternatives would be for me to build my own Computers from OEM parts and carry my own inventory and to be "on-the-hook" for failed hardware - then I could valid Strict! Not!!!!!

Thanks Tail.

(I'm looking forward to having the requisite spare 3 or 4 hours to 'play' with css boxes within the floated content. I just know it's a gonna be fun!)

Thanks for the link too....



Tailslide -> RE: Right Margin Woes - or something! (10/11/2008 13:41:20)

Well you could cheat and use: 

<a href="some.html" onclick="return ! window.open(this.href);"> some place</a>


Instead which would be valid by the letter of the law rather than the spirit. (without JS it degrades to a normal link).

You'll be fine with the floats - just remember to clear whatever's after them and remember to give them a width (it'll have to be in %) and you'll be fine.



Tailslide -> RE: Right Margin Woes - or something! (10/12/2008 2:47:52)

Here's a TEST PAGE with the floats - no problem. Works fine back to IE5.




michaelea -> RE: Right Margin Woes - or something! (10/12/2008 4:36:31)

Yessss! That'd be the old one, two three!

I am in awe that.... a) you took the time and laid the code out for me (gratis) and b) that it actually friggin' works!

I can't thank you enough.... Now I can devote my full time and attention to that pesky right white margin in the rightCol at wider Browser widths... I have an idea for a right border repeating vertical graphic a la 'pixellated' edges mode: http://www.photoshoplab.com/pixelated-mosaic-edges.html#c#comment-38465 - or not... we'll see.

A truly wonderful learning experience for me. Thank You.



michaelea -> RE: Right Margin Woes - or something! (10/15/2008 11:41:59)


Just thought anyone reading this thread might be interested. Check this page out...

http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm

Pixels, Ems or Percentages (see right side of top navbar) and weird wrapper divs but no broken box model hacks.. and, appears to work!

There's always someone out there with another idea!



Tailslide -> RE: Right Margin Woes - or something! (10/15/2008 11:48:26)

It works but it's not nice... too many divs - I personally prefer as few as possible but then I like my sanity so I don't try to mix fluid and fixed! [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375