SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: Cross-browser 2col layout?
-
Sep 5, 2007, 19:47 #1
Cross-browser 2col layout?
Hi,
I've tried my very best to find a 2col layout thats cross-browser and strict valid on the net, but haven't had much luck.
The problem is that the layout needs to be fluid but in some pages I want to make the layout confined and whenever I try to change this kind of stuff in the templates or examples, it always always messes the whole thing up.
I coded a layout myself, but there are some floating problems and I don't even want to embarass myself by going into what the problems may be.
So im looking for some help or some direction where I can find something like this?
Code:-------------------------------------------------------------------- header fixed height 100% width ------------------------------------------------------------------- nav fluid/fixed height ------------------------------------------------------------------- | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------------------------------------------------------------- footer --------------------------------------------------------------------
It would be ideal if I could find a template/example that has the above layout and is cross-browser b/c mine isn't, im only aiming for ff and ie and having enough problems with that as it its.
I do have what i coded though still if you want me to post it.
Thanks in advance.
-
Sep 5, 2007, 20:24 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Hello,
Mark up something like this
Code:<div id="header"></div> <ul id="nav"> </ul> <div id="sidebar"></div> <div id="content"></div> <div id="footer"></div>
Code:#content { margin-right: 200px } #sidebar { float: right; width: 200px } #footer { clear: right }
http://www.pmob.co.uk/temp/2col_main.htm
There's lots more examples on Pauls site.
Hope it helps
-
Sep 6, 2007, 21:47 #3
Thanks for your help,
I tried your suggestion but the problem of the content or side bar overflowing vertically still persists.
and Paul's layout is fixed - i did find http://www.pmob.co.uk/temp/2colfixed_5.htm but can't seem to move the nav from left to right.
Im trying to have the content div liquid, the side bar fixed and the thing that holds them inside fluid as well and centered horizontally.
i've seen so many sites with this layout especially wordpress blog templates.
should i just download one of those and crack my head with it to make it fluid?
-
Sep 6, 2007, 22:13 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
I tried your suggestion but the problem of the content or side bar overflowing vertically still persists.
My suggestions are flawless in every possible way!
-
Sep 7, 2007, 07:02 #5
I didn't mean to undermine your knowledge, its probably something with my code.
Im not home right now, and don't have the full src with me or ff and I tried the layout here in ie6 and it seems to be working ok with the exception of the right colum dropping on window resize.
The vertical overflow I was talking about was happening in firefox and maybe ie7 I can't remember for sure though but definately ff. the content col1 and col2 would flow over the "content" div instead of extending it down.
The other problem with the liquid setting is that, when I resize the window, the right column - col2, drops down in both ff and ie. What would be your suggestion on how to fix this and still keep the main column liquid?
Here is the code (please excuse my um - whats the word for it might not be too nice?)
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title> Site Name </title> <style type="text/css"> /* using Erik Meyer's almost-global-reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1.3em; font-family: inherit; text-align: left; vertical-align: baseline; } a img, :link img, :visited img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } /* commented backslash hack \*/ html, body{height:100.1%;} /* end hack */ html,body {margin:0;padding:0} /* all other styles by ratan */ /* global style */ body { font:100%/1.25 arial, helvetica, sans-serif; line-height: 1.3em; background:#fff; } /* typographic styles */ h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:normal; } h1 { padding:10px 0 10px 5px; letter-spacing:-1px; font:2em trebuchet ms, helvetica, sans-serif; } h2 { padding:20px 0; letter-spacing:-1px; font:1.5em arial, helvetica, sans-serif; } h3 { font:1em arial, helvetica, sans-serif; font-weight:bold; } h4 { padding:6px 5px 6px 5px; letter-spacing:-1px; font:1.3em trebuchet ms, helvetica, sans-serif; color:#edf7ff; background:#073c78; } h5 { padding:5px; font: 1.3em trebuchet ms, helvetica, sans-serif; color:#edf7ff; background:#073c78; } h6 { padding:5px; font:1.3em trebuchet ms, helvetica, sans-serif; color:#fefefe; background:#3e3e3e; } /* custom style */ div {border:0px solid red;} #pagemax { width:100%; height:100%; min-width:100%; min-height:100.1%; background:#eee; overflow:visible; } #head { height:100px; background:#fff; padding:5px; } #topnav { height:20px; background:#474747; padding:2px; margin:5px 0px 0px 0px; } #content { width:95%; height:100%; padding:7px; margin:1% auto; background:#fff; text-align:center; } #footer { height:150px; background:#eee; border-top:3px solid #999; clear:both; position:relative; margin-top:10px; } #content-col1 { width:70%; height:100%; background:#fff; float:left; padding:0px; overflow:visible; margin:5px 0px 5px 0px; } #content-col2 { width:305px; height:100%; background:#eee; float:left; padding:3px; overflow:visible; margin:5px 0px 5px 5px; } #col2-nav { background:#2c2c2c; padding:5px; } #col2-nav-inner { background:#eee; text-align:center; } #footer-content { width:90%; height:100%; padding:7px; margin:1% auto; background:#ccc2a7; } /* for testing only */ div {border:1px solid #ffcc00;} .pad5 {padding:5px:] .pad10 {padding:10px;} </style> </head> <body> <div id="pagemax"> <div id="content"> <div id="head"> <a href="#"><!--<img src="cmlogo.gif" alt="Career Mania - Your window to opportunities" title="Career Mania" />--> </a> </div> <div id="topnav"> nav </div> <div id="content-col1"> <h2>content alternate #cdf0ff for h1</h1> <br/> <br/> <br/> <br/> dummy text <br/><br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> </div> <div id="content-col2"> <!-- end nav--> <br/> nav text <br/><br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> </div> <!-- end col2 --> <div id="footer"> footer </div> <!-- end both --> </div> </div> <br/> <br/> </body> </html>
Thanks for your help though still!
-
Sep 7, 2007, 07:30 #6
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Hmm,
You don't seem to have tried what I suggested at all. The easiest way to make the layout is to:
- place the fixed width column first in the markup
- Float that column and give it a width
- Give the other column a margin equal to the width of the floated column.
That's it - Just like my example above. You can change the the 200px to 30% or any other unit.
Don't mix percentages and pixels. At the moment the margin you have for the space of the 2nd column is a percentage.
At smaller windows this percentage is less than the width of the column and it no longer fits.
-
Sep 7, 2007, 11:16 #7
I'm confused. So I can't have a fixed width colum with a fluid one inside a fluid container? (without major problems)
for the margin part do you mean the space that is left over to use by the second column because the first one has a width of 70%?
So the second column can only use 30% and then since 300px doesnt fit in it, it drops down?
Is there a solution to this without losing the fixed width second column?
-
Sep 7, 2007, 16:10 #8
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
I'm confused. So I can't have a fixed width colum with a fluid one inside a fluid container? (without major problems)
Is there a solution to this without losing the fixed width second column?
At 500px
- You would have a 350px first column and 300px second column - That's 650px and obviously wont fit.
At 600px
- 420px + 300px = 720px
At 800px
- 560px + 300px = 860px
At 1000px
- 700px + 300px = 1000px (Minimum Browser width without breaking)
> 1000px - leaves large margins
As stated above - All you need to do to make it fluid is change the px's to %'s
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #content { margin-right: 30% } #sidebar { float: right; width: 30% } #footer { clear: right } /* Just for style - Not Layout */ #content { background: #FC6} #sidebar { background: #F69} #footer { background: #CC3} #header { background: #F33} </style> </head> <body> <div id="header">Header</div> <ul id="nav"> <li>Menu</li> <li>Menu</li> <li>Menu</li> </ul> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer Footer Footer</div> </body> </html>
-
Sep 11, 2007, 18:59 #9
That worked really nice!
Thanks a lot!
And do you know if there's any way to have the sidebar div placed after the content div in the source? Its not too big of a concern but i've heard its better seo if content comes first in source
also, do you know what browsers support min and max width/height other than ff and ie7?
-
Sep 11, 2007, 21:37 #10
-
Sep 11, 2007, 22:33 #11
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
And do you know if there's any way to have the sidebar div placed after the content div in the source? Its not too big of a concern but i've heard its better seo if content comes first in source
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0} #content { width: 100%; margin-left: -30%; float: left; } #content .inner { margin-left: 30% } #sidebar { float: right; width: 30% } #footer { clear: right } /* Just for style - Not Layout */ #content { background: #FC6} #sidebar { background: #F69} #footer { background: #CC3} #header { background: #F33} </style> </head> <body> <div id="header">Header</div> <ul id="nav"> <li>Menu</li> <li>Menu</li> <li>Menu</li> </ul> <div id="content"> <div class="inner"> Content </div> </div> <div id="sidebar">Sidebar</div> <div id="footer">Footer Footer Footer</div> </body> </html>
also, do you know what browsers support min and max width/height other than ff and ie7?
Bookmarks