Cross-browser 2col layout?

[ratan]

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?

--------------------------------------------------------------------

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.

[markbrown4]

Hello,

Mark up something like this

<div id="header"></div>
<ul id="nav">
</ul>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>

Then the three standard block level elements don't need anything done to them - The only things you need are

#content { margin-right: 200px }
#sidebar { float: right; width: 200px }
#footer { clear: right }

Or you can use something like this for a more complicated 100% high model.
http://www.pmob.co.uk/temp/2col_main.htm
There's lots more examples on Pauls site.

Hope it helps

[ratan]

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?

[markbrown4]

I tried your suggestion but the problem of the content or side bar overflowing vertically still persists.

I don't know what you mean. Can you post the code you have tried to use?
My suggestions are flawless in every possible way!

[ratan]

I don't know what you mean. Can you post the code you have tried to use?
My suggestions are flawless in every possible way!

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?)

<!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&#37;;
    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!

[markbrown4]

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.

[ratan]

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?

[markbrown4]

I'm confused. So I can't have a fixed width colum with a fluid one inside a fluid container? (without major problems)

Yes you can, as I've tried to explain. You can have a fluid column in the sense that it will occupy all the space available by giving it a margin equal to the width of the float.

Is there a solution to this without losing the fixed width second column?

It's just maths, 300px + 70% of the browser width - Is not a good solution.
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

<!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>

[ratan]

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?

[rguy84]

Thanks for your help,

I tried your suggestion but the problem of the content or side bar overflowing vertically still persists.

Just wondering if you tried overflow:scroll;?

[markbrown4]

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

You can achieve content first using a negative margin.

<!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&#37;; 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?

I believe all the modern popular browsers except the most popular IE6 supports these properties. That's Firefox / IE7 / Safari / Opera / Netscape etc..