Right Margin Woes - or something!

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Right Margin Woes - or something!

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> Right Margin Woes - or something!

Page: [1]


michaelea Posts: 105 Joined: 11/9/2007 From: Cannon Beach, US West Status: offline	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 Posts: 6294 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to michaelea)


michaelea Posts: 105 Joined: 11/9/2007 From: Cannon Beach, US West Status: offline	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! (in reply to Tailslide)


Tailslide Posts: 6294 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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 _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to michaelea)


michaelea Posts: 105 Joined: 11/9/2007 From: Cannon Beach, US West Status: offline	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.... (in reply to Tailslide)


Tailslide Posts: 6294 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to michaelea)


Tailslide Posts: 6294 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Tailslide)


michaelea Posts: 105 Joined: 11/9/2007 From: Cannon Beach, US West Status: offline	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. (in reply to Tailslide)


michaelea Posts: 105 Joined: 11/9/2007 From: Cannon Beach, US West Status: offline	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! (in reply to michaelea)


Tailslide Posts: 6294 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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! _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to michaelea)