Is this a good way to go about for a 2 Column layout using %

HTML & CSS
1

Here is the HTML & CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Page</title>
<style type="text/css">
body 
{
	margin:auto;
}
#ContentHolder
{
	margin-left:auto;
	margin-right:auto;
}

#TopNav
{
	
	border:solid black 1px;
	padding:1%;
	margin-bottom:1%;
}
#LeftNav
{
	float:left;
	width:25%;
	border:solid red 1px;
	padding:1%;
	
}
#Container
{
	border:solid yellow 1px;
	margin-left:28%;
	width:70%;
	padding:1%;
	/*clear:both ;*/
}
#Footer
{
	margin-top:1%;
	padding:1%;
	border:solid black 1px;
}
</style>
</head>
<body>
    <div id="ContentHolder">
        <div id="TopNav">This is Top Content</div>
        <div id="LeftNav">Here goes Left Navigation</div>
        <div id="Container">Here goes main content</div>
        <div id="Footer">This is the Footer</div>
    </div>
</body>
</html>

I’ve been using pixels for layout since. Trying to change things, I’m not sure if using percentages for layout is a good idea at all ? Or if this css is any good .
This doesn’t looks good when the browser is resized. The left div drops below to the footer. I thought clear:both could be used on floating items to keep the footer down, but not sure why its not working here.
Also the left section needs a min-width, Do I have to use pixels for units or is there other way.
Thanks

2

Hi,

I would avoid vertical margins and padding in percentage because percentage measurements refer to the width of the container and not its height and will therefore scale as the page is narrowed or made wider but not in relation to the height of the container as you may have expected. I always use px for vertical padding and margins.

Also you have added 1px borders to your measurements thus making your content area 2px too big. Your #Container doesn’t need a width anyway so just remove the width and the element will fit automatically.

Remember to clear the footer or the borders will slide under the float. Apply bottom margins to the floated left column to keep the footer away as margin-top slides under the floated element above and will have no effect (unless its a really big margin that reaches the containing block).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page</title>
<style type="text/css">
html,body { margin:0;padding:0}
#ContentHolder {
	margin-left:auto;
	margin-right:auto;
}
#TopNav {
	border:1px solid black;
	padding:10px 1%;
	margin-bottom:10px;
}
#LeftNav {
	float:left;
	width:25%;
	border:1px solid red;
	padding:10px 1%;
	margin-bottom:10px;
}
#Container {
	border:1px solid orange;
	margin:0 0 10px 28%;
	padding:10px 1%;/*clear:both ;*/
	zoom:1.0;
}
#Footer {
	padding:10px 1%;
	border:1px solid black;
	clear:both;
}
</style>
</head>
<body>
<div id="ContentHolder">
		<div id="TopNav">This is Top Content</div>
		<div id="LeftNav">Here goes Left Navigation</div>
		<div id="Container">Here goes main content</div>
		<div id="Footer">This is the Footer</div>
</div>
</body>
</html>

Make sure that content in the left fluid column is small enough to fit and can be allowed to get smaller. e.g. don’t put lots of fixed width large images in a small fluid width column because that will soon break or you will need to hide the overflow.

3

Thanks a lot Paul for your reply, It was very useful.

While I am using percentages, I’d like to have fixed widths or rather min-widths at certain places. The page could show a horizontal scroll when the browser is re-sized small.
For ex, a menu on the left section which should not wrap, input fields, images & stuff. Would it be a good practice to use pixels here to define min-width. Or do em come useful here, ( I don’t really know how to use ems). Is it a standard to mix pixels & percentages ?

Another thing going further , I had a H1 (floated left ) & a div (Floated right) in the top div. But they fall out of the enclosing Div unless I put overflow:auto on the enclosing div. Do you know if there is some kind of rule for this ?

4

If you have a fixed width element inside your percentage width column the you would need to set a min-width on that column equal to the widest element in that column otherwise the container just gets smaller but the inner element will stick out.

For ex, a menu on the left section which should not wrap, input fields, images & stuff. Would it be a good practice to use pixels here to define min-width. Or do em come useful here, ( I don’t really know how to use ems). Is it a standard to mix pixels & percentages ?

You can use ems which are based on the font-size of the parent element and allows the element to expand should the user resize the text or have larger text by default.

You can mix percentages and pixels and ems but its best to avoid it if possible but it is possible although you need to take great care that things actually fit. If all your inner elements need to be a fixed pixel with then it doesn’t make sense to have a percentage width container for them. Plan ahead, make sure things fit and set a min-width equal to the largest fixed width element in that section

Another thing going further , I had a H1 (floated left ) & a div (Floated right) in the top div. But they fall out of the enclosing Div unless I put overflow:auto on the enclosing div. Do you know if there is some kind of rule for this ?

Floats are removed from the flow so a container that holds only floats in fact holds nothing and has zero height. Therefore if you want to contain the floats within the parent you need to clear the floats by placing a clear element after the float but before the closing div of the parent. Luckily you don’t need to add extra elements to do this because you can use either the clearfix approach or use overflow:hidden which creates a new block formatting context and auto encloses child floats (overflow:auto also works but scrollbars would show if anything accidentally pokes out).

You can;t use the overflow method if you want visible overflow so in that case use the clearfix approach.

See the faq on floats (see my sig for a link to the css faq)

5

Thanks Paul, THe CSs FAQ is great!!.

If all your inner elements need to be a fixed pixel with then it doesn’t make sense to have a percentage width container for them. Plan ahead, make sure things fit and set a min-width equal to the largest fixed width element in that section

I was thinking on the lines of having the layout fit well on 1024 resolution & stretch for higher so I thought if it woould be ok to use min-width for 1024 & percentages for higher. Not sure how good a idea that is. I guess usually there are certain fixed witdth elements & certain content that could resize.

Going ahead with above posted html for learning, created a 3 coulumn layout using your sticky footer method. But I cant get the border/background of the columns to go down the way till the footer if i don’t have enough content. I think I had seen a tutorial on it but I can’t seem to remember where, Faux columns on a List apart did not help. Any suggestions are appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Untitled Page</title>
<style type="text/css">

html,body { margin:0;padding:0;}
html, body ,#ContentHolder {height: 100%; }
h1 { margin:0;padding:0}

body 
{
	font-family:Verdana;
	font-size:10px;
}
#ContentHolder
{
	margin-left:auto;
	margin-right:auto;
	height:100%;
}

#TopContainter  
{
	  min-height:100%;
	  min-width:1000px;
}

#TopNav
{
	border-bottom:1px solid black;
	padding:10px 1%;
	margin-bottom:10px;
	overflow:auto;
	min-width:800px;
}

#LeftNav
{
	float:left;
	width:16%;
	border-right:1px solid #6e6e6e;
	padding:10px 10px;
	margin-bottom:10px;
	min-width:160px;   /* 220 */ 
}

#Container
{
	margin:0 10px 0 10px;
	min-width:680px;     /* 720*/
	padding:10px 1%;
	zoom:1.0;
	float:left;
	width:68%;
	border:1px solid #6e6e6e;
}

#RightNav
{
	float:left;
	width:7%;
	border-left:1px solid #6e6e6e;  
	padding:10px 10px;
	margin-bottom:10px;
	min-width:70px; /* 130 */
	border-left:1px solid red;
}

#Footer
{
	padding:10px 1%;
	border-top:1px solid black;
	clear:both;
	height:40px;
	margin-top:-72px;
}

input
{
	font-family:Verdana;
	font-size:9px;
	border:Solid gray 1px;
}

a
{
	text-decoration:none;
	color:#6e6e6e;
}
/*-------------------------*/

#TopHeading
{
	width:50%;
	float:left;
	background: url(../Images/logo.gif);
	background-repeat : no-repeat;
	text-indent:-999px;
	height:60px;
}

#LoginBlock
{
	float:right;
}

/*-------------------------*/
#LeftNav ul
{
	list-style:none;
	
}

#LeftNav ul li
{
	border-top:solid black 1px;
	padding:3px;
}

#LeftNav ul li ul
{
	padding:8px;
	border-bottom:solid black 1px;
	border-right:solid black 1px;
}

#LeftNav ul li a
{
	display:block;
	width:175px;
	padding:3px;
	text-decoration:none;
}

#LeftNav ul li a:hover
{
	display:block;
	width:175px;
	padding:3px;
	color:orange;
}

/*-------------------------*/

.ProductList
{
	list-style:none;
	width:650px;
}

.ProductList li
{
	float:left;
	border:solid #e6e6e6 1px;
	padding:10px;
	margin:15px;
    width:160px;
    text-align:center;
}

.prodtitle
{
	margin-top:5px;
	text-align:center;
	border-top:solid #9f9f9f 1px;
}

.ProductHeader
{
	font-weight:bold;
	border:solid #9f9f9f 1px;	
	background-color:#e3e3e3;
	padding:5px;
	width:90%;
	min-width:650px;
	display:block;  /* clearfix approach ? */
	overflow:hidden;
}

.ProductList img
{
	width:160px;
	height:150px;
}
	
.Container h2	
{
	width:80%;
	height:50px;
	border:solid #9f9f9f 1px; 
}

#RightNav Div
{
	border:solid #9f9f9f 1px; 
	margin-bottom:15px;
}

</style>

</head>
<body>
<div id="ContentHolder">
    <div id="TopContainter">
        <div id="TopNav">
            <h1 id="TopHeading">Header</h1>
            <div id="LoginBlock">
                User Name : <input name="ctl00$UserId" type="text" id="ctl00_UserId" />
                Password  : <input name="ctl00$UserPassword" type="text" id="ctl00_UserPassword" />
                <input type="submit" name="ctl00$btnSubmit" value="Login" id="ctl00_btnSubmit" />
            </div>  
        </div>
        <div id="LeftNav">
            <ul>
                <li>Category 1
                    <ul>
                        <li><a href="#">L Item 1</a></li>
                        <li><a href="#">L Item 1</a></li>
                        <li><a href="#">L Item 1</a></li>
                        <li><a href="#">L Item 1</a></li>
                    </ul>
                
                </li>
            </ul>
            <ul>
                <li>Category 2
                    <ul>

                        <li><a href="#">L Item 1</a></li>
                        <li><a href="#">L Item 1</a></li>
                        <li><a href="#">L Item 1</a></li>
                        <li><a href="#">L Item 1</a></li>
                    </ul>
                
                </li>
            </ul>
        </div>
        <div id="Container">
           <h2>Main Page Display</h2>
            <div class="ProductHeader">Featured Products</div>
            <ul class="ProductList">
                <li><div><img src="ProductImages/p0.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p1.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p2.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p3.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p3.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p3.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
            </ul>
            <div class="ProductHeader">Featured Products</div>
            <ul class="ProductList">
                <li><div><img src="ProductImages/p0.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p1.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
                <li><div><img src="ProductImages/p2.png" border="0" alt="Image" /></div><div class="prodtitle"><a href="#">Product Info</a></div></li>
            </ul>
        </div>
        <div id="RightNav">
            <div> This is a right Block</div>
            <div> This is a right Image <img src="" width="80px" height="80px" alt=""  border="1"/> </div>
        </div>
    </div>        
    <div id="Footer">Footer</div>
</div>
</body>
</html>
6

Hi,

You may want to look at this layout as it has all the elements you are looking for (sticky footer, equal columns, different column colours).

You have a few errors in your layout as you cannot use 100% height anywhere in a fluid page. The main wrapper can be min-height:100% but no other elements can inherit that height. You have one shot at having a 100% high container and it must be the first container on the page (read the faq on 100% height for more info).

Suffice to say equal columns and 100% heights are not something that css does easy unless you want to use the display:table-properties (ie8+). It’s best to design around these issues as most of the time designs look better without all things being equal.

Also you should be aiming at 960px width rather than the 1024px as that is a bit wide (and indeed some mobile devices expect a 960px width and scale to that size unless told differently).

You have too many width and too many min-widths for such a simple layout and really all the column min-widths should be controlled by the main wrapper min-width. there shouldn’t be a need to apply min-width to each of the internal columns.

Your left and right columns are very narrow and really should be a fixed width anyway as it is pointless making them expand and shrink for such a narrow range.

There are also too many percentage widths and then pixel padding added which is never going to be consistent. You should make the containers just have a width and then add padding and to inner elements and then you always know how wide the container will be. I prefer to have fixed width side columns and then basically the middle column just fills the available space without needing a width although that usually means the middle column must be last in source. However in my example above there is a technique to keep logical html order that allows the middle column to just fill the gap.

Don’t give everything a percentage width when they are already inside a percentage container. You can just let them fill the space and add padding and margin to space them out.

Your sticky footer method is missing some key elements to work cross browser and indeed as I mentioned before you can’t use the 2 100% heights that you have used and removing them breaks your footer although it would have been broken anyway because content would have spilled out of the 100% height because the element can never grow. The footer needs to be outside the page wrapper to work properly as in my link above.

I’m a bit rushed at the moment so this is very rough but at least the footer is working.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
ul {
	margin:0;
	padding:0;
	list-style:none
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#ContentHolder:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
html, body {
	margin:0;
	padding:0;
}
html, body { height: 100%; }
h1 {
	margin:0;
	padding:0
}
body {
	font-family:Verdana;
	font-size:10px;
}
#ContentHolder {
	margin-left:auto;
	margin-right:auto;
	min-height:100%;
	margin-top:-72px;
	min-width:960px;
}
* html #ContentHolder { height:100% }
#TopContainter { border-top:72px solid #fff; }
#TopNav {
	border-bottom:1px solid black;
	padding:10px 1%;
	margin-bottom:10px;
	overflow:auto;
	zoom:1.0;
}
#LeftNav {
	float:left;
	width:15%;
	margin-bottom:10px;
	border-left:1px solid #6e6e6e;
	margin-right:-1px;/* offset border*/
}
#Container {
	float:left;
	width:70%;
}
.inner {
	padding:10px;
	border:1px solid #6e6e6e;
	zoom:1.0;
	margin:l0px;
}
#RightNav {
	float:right;
	width:13%;
	margin-bottom:10px;
	min-width:70px; /* 130 */
	border-left:1px solid #6e6e6e;
	margin-left:-1px;/* offset border*/
}
.inner2 {
	padding:10px;
	margin:10px;
}
#Footer {
	padding:10px 1%;
	border-top:1px solid black;
	clear:both;
	height:51px;
}
input {
	font-family:Verdana;
	font-size:9px;
	border:Solid gray 1px;
}
a {
	text-decoration:none;
	color:#6e6e6e;
}
/*-------------------------*/

#TopHeading {
	width:50%;
	float:left;
	background: url(../Images/logo.gif);
	background-repeat : no-repeat;
	text-indent:-999px;
	height:60px;
}
#LoginBlock { float:right; }
/*-------------------------*/
#LeftNav ul { list-style:none; }
#LeftNav ul li {
	border-top:solid black 1px;
	padding:3px;
}
#LeftNav ul li ul {
	padding:8px;
	border-bottom:solid black 1px;
	border-right:solid black 1px;
}
#LeftNav ul li a {
	display:block;
	padding:3px;
	text-decoration:none;
}
#LeftNav ul li a:hover {
	display:block;
	padding:3px;
	color:orange;
}
/*-------------------------*/

.ProductList { list-style:none; }
.ProductList li {
	float:left;
	border:solid #e6e6e6 1px;
	padding:10px;
	margin:15px;
	text-align:center;
}
.prodtitle {
	margin-top:5px;
	text-align:center;
	border-top:solid #9f9f9f 1px;
}
.ProductHeader {
	font-weight:bold;
	border:solid #9f9f9f 1px;
	background-color:#e3e3e3;
	padding:5px;
}
.ProductList img {
	width:160px;
	height:150px;
}
.Container h2 { border:solid #9f9f9f 1px; }
#RightNav Div {
	border:solid #9f9f9f 1px;
	margin-bottom:15px;
}
</style>
</head>
<body>
<div id="ContentHolder">
		<div id="TopContainter">
				<div id="TopNav">
						<h1 id="TopHeading">Header</h1>
						<div id="LoginBlock"> User Name :
								<input name="ctl00$UserId" type="text" id="ctl00_UserId" />
								Password  :
								<input name="ctl00$UserPassword" type="text" id="ctl00_UserPassword" />
								<input type="submit" name="ctl00$btnSubmit" value="Login" id="ctl00_btnSubmit" />
						</div>
				</div>
				<div id="LeftNav">
						<div class="inner2">
								<ul>
										<li>Category 1
												<ul>
														<li><a href="#">L Item 1</a></li>
														<li><a href="#">L Item 1</a></li>
														<li><a href="#">L Item 1</a></li>
														<li><a href="#">L Item 1</a></li>
												</ul>
										</li>
								</ul>
								<ul>
										<li>Category 2
												<ul>
														<li><a href="#">L Item 1</a></li>
														<li><a href="#">L Item 1</a></li>
														<li><a href="#">L Item 1</a></li>
														<li><a href="#">L Item 1</a></li>
												</ul>
										</li>
								</ul>
						</div>
				</div>
				<div id="Container">
						<div class="inner">
								<h2>Main Page Display</h2>
								<div class="ProductHeader">Featured Products</div>
								<div class="ProductHeader">Featured Products</div>
								<ul class="ProductList">
										<li>
												<div><img src="ProductImages/p0.png" border="0" alt="Image" /></div>
												<div class="prodtitle"><a href="#">Product Info</a></div>
										</li>
										<li>
												<div><img src="ProductImages/p1.png" border="0" alt="Image" /></div>
												<div class="prodtitle"><a href="#">Product Info</a></div>
										</li>
										<li>
												<div><img src="ProductImages/p2.png" border="0" alt="Image" /></div>
												<div class="prodtitle"><a href="#">Product Info</a></div>
										</li>
								</ul>
						</div>
				</div>
				<div id="RightNav">
						<div class="inner2">
								<div> This is a right Block</div>
								<div> This is a right Image <img src="" width="80px" height="80px" alt=""  border="1"/> </div>
						</div>
				</div>
		</div>
</div>
<div id="Footer">Footer</div>
</body>
</html>

The elements called .inner and .inner2 hold all the padding and margins which leaves the containers able to us percentage with without problems and make them all add up although you should always allow some breathing space as percentages are rounded up and 50% + 50% sometimes make 51% and won’t fit.

7

Thanks for all those points Paul . They are very useful.