Can someone PLEASE tell me how to make columns automatically size to their contents vertically when using floats? I assume you have to use floats to make columns.
Normally, I create a div and set its height to XXXpx and then I create two divs inside that one and set their height to 90% or so. Those divs will then always resize with the content, but as soon as I put floats on the inner divs, they are no longer inline
(or inside) the container div, so the entire thing breaks down.
Someone should write a thesis on this topic, because I've seen it asked thousands of times, and I've never seen an answer that fixes it. My content is loaded from a database into the right column. I have NO WAY of know the size of that content before it's
loaded, so I need the columns to adjust automatically, like they would normally do, but using floats breaks everything.
How do I make a left column (or navbar) that is floated to the left, but still will always take up 100% of the page?? That way, when the right column gets longer as its filled with content, the left navbar will always stay at 100% so my design looks
professional??
Can you please explain why it doesn't work. W3 says the code is valid. But when I run it, it doesn't work. Just like every other example I've ever tried.
<!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>
<title></title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
height:100%; /* Important */
}
#header{
width:100%;
background-color:#0000CC;
height:100px;
clear:both;
}
#footer{
width:100%;
background-color:#FFFF00;
height:100px;
position:absolute;
bottom:0; /* This ensures that the footer stays at the bottom of the page */
}
#container{
height:100%;
}
#sidebar{
width:20%;
float:left;
background-color:#FF0000;
position:absolute;
top:100px;
bottom:100px;
}
#column{
width:80%;
float:right;
clear:right;
background-color:#330033;
position:absolute;
right:0; /* This ensures that the content stays at the right side of the page */
top:100px;
bottom:100px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>
<div id="header">Welcome to my paqge</div>
<div id="container">
<div id="sidebar">
<p>Menu</p>
</div>
<div id="column">
<h1>Title</h1>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
<p>This is page content</p>
<p>Some MORE content</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
I thought it was supposed to be 100% fluid, according to the article? Other artice has the same problem.
The code you gave works, it just does not do what you want it to. It assumes you want to the page to stop at the bottom of the browser, which is not what you asked for.
There are many examples out there of how to do with with css, such as the faux column technique, but that assumes your left column will always be smaller than your right. It's quite simple once you understand how it works. You have a container, with a
background of say red. Then you put two divs in the container, well call them leftdiv and rightdiv. leftdiv will contain your menu and either no background, or the same background as the container, and rightdiv will have a different background. You can
float leftdiv, and rightdiv, but then make sure you put overflow:hidden on the container so that it will expand to contain the heights of both divs.
Marked as answer by Kensino on May 14, 2012 06:42 PM
This is what I tried to do. I have a container with 2 columns inside it, one for main content and one for a side bar. I have the sidebar the same color as the container and the main column has a background on it.
But I need the columns to be side by side, and I floated them. As soon as I float the left and right columns, the are no longer INSIDE the container because they are taken out of alignment from the rest of the web page. So that container no longer stretches
completely around the columns and the background on the left column doesn't work right.
How can I keep them still inside the container after I have floated them? Do I need to float the container as well?
p.s. I seen the faux columns a while back and I don't like them. I want to do this without having things. It's a pretty basic design so it shouldn't need all that.
EDIT: Ok, I think I see what you are saying with the overflow hidden on the container, so that it will fix my problem, but why does that work? How does that make the container stretch around the columns?
Kensino
Member
70 Points
185 Posts
Vertical Columns
May 12, 2012 03:42 AM|LINK
Can someone PLEASE tell me how to make columns automatically size to their contents vertically when using floats? I assume you have to use floats to make columns.
Normally, I create a div and set its height to XXXpx and then I create two divs inside that one and set their height to 90% or so. Those divs will then always resize with the content, but as soon as I put floats on the inner divs, they are no longer inline (or inside) the container div, so the entire thing breaks down.
Someone should write a thesis on this topic, because I've seen it asked thousands of times, and I've never seen an answer that fixes it. My content is loaded from a database into the right column. I have NO WAY of know the size of that content before it's loaded, so I need the columns to adjust automatically, like they would normally do, but using floats breaks everything.
How do I make a left column (or navbar) that is floated to the left, but still will always take up 100% of the page?? That way, when the right column gets longer as its filled with content, the left navbar will always stay at 100% so my design looks professional??
PLEASE
Thanks.
urenjoy
Star
12305 Points
1851 Posts
Re: Vertical Columns
May 12, 2012 04:45 AM|LINK
See following links:
http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
http://www.robicowebsolutions.com/css/2-column-fluid-layout-100-height-using-css
Kensino
Member
70 Points
185 Posts
Re: Vertical Columns
May 13, 2012 02:34 AM|LINK
Both of those fail horribly when I tried them. I'm just going to say the design I wan't isn't currently possible with today's technology.
Thanks anyway.
Kensino
Member
70 Points
185 Posts
Re: Vertical Columns
May 13, 2012 11:15 AM|LINK
Ok,
Can you please explain why it doesn't work. W3 says the code is valid. But when I run it, it doesn't work. Just like every other example I've ever tried.
<!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> <title></title> <style type="text/css"> <!-- body { margin:0; padding:0; height:100%; /* Important */ } #header{ width:100%; background-color:#0000CC; height:100px; clear:both; } #footer{ width:100%; background-color:#FFFF00; height:100px; position:absolute; bottom:0; /* This ensures that the footer stays at the bottom of the page */ } #container{ height:100%; } #sidebar{ width:20%; float:left; background-color:#FF0000; position:absolute; top:100px; bottom:100px; } #column{ width:80%; float:right; clear:right; background-color:#330033; position:absolute; right:0; /* This ensures that the content stays at the right side of the page */ top:100px; bottom:100px; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> </head> <body> <div id="header">Welcome to my paqge</div> <div id="container"> <div id="sidebar"> <p>Menu</p> </div> <div id="column"> <h1>Title</h1> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> </div> </div> <div id="footer">Footer</div> </body> </html>I thought it was supposed to be 100% fluid, according to the article? Other artice has the same problem.
Kensino
Member
70 Points
185 Posts
Re: Vertical Columns
May 13, 2012 08:50 PM|LINK
There's no way to do this with C# either?? I tried adding panels and setting their heights and that didn't work either.
GET LEFT COLUMN PANEL HEIGHT
GET RIGHT COLUMN PANEL HEIGHT
FIGURE OUT WHAT PANEL IS TALLER
SET BOTH PANEL'S HEIGHT TO THE HEIGHT OF THE TALLEST PANEL
But when the page loads, nothing happens.
asteranup
All-Star
30184 Points
4906 Posts
Re: Vertical Columns
May 14, 2012 04:54 AM|LINK
Hi,
Using javascript you can resolve this issue-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#sidebar").height($("#column").height()); $(window).resize(function () { $("#sidebar").height($("#column").height()); }); }); </script> <style type="text/css"> body { margin:0; padding:0; } #header{ width:100%; background-color:#0000CC; height:100px; clear:both; } #footer{ width:100%; background-color:#FFFF00; height:100px; clear:both; } #container { width:100%; } #sidebar{ width:20%; float:left; background-color:#FF0000; } #column{ float:left; width:80%; background-color:#330033; } </style> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> </head> <body> <div id="header">Welcome to my paqge</div> <div id="container"> <div id="sidebar"> <p>Menu</p> </div> <div id="column"> <h1>Title</h1> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> <p>This is page content</p> <p>Some MORE content</p> </div> </div> <div id="footer">Footer</div> </body> </html>There is another alternative to this using a backgrioud image. check the first example in this post-
http://www.ejeliot.com/blog/61 that is http://www.ejeliot.com/samples/equal-height-columns/example-1.html
You can also check the following post-
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Kensino
Member
70 Points
185 Posts
Re: Vertical Columns
May 14, 2012 01:41 PM|LINK
Thank you.
I will try the JavaScript example, and see if it helps.
So I'm just cerious is this NOT possible with C#? I would like to learn how to do it with C# because that can't be disabled, like JavaScript can.
Motley
Star
13789 Points
2449 Posts
MVP
Re: Vertical Columns
May 14, 2012 05:16 PM|LINK
The code you gave works, it just does not do what you want it to. It assumes you want to the page to stop at the bottom of the browser, which is not what you asked for.
There are many examples out there of how to do with with css, such as the faux column technique, but that assumes your left column will always be smaller than your right. It's quite simple once you understand how it works. You have a container, with a background of say red. Then you put two divs in the container, well call them leftdiv and rightdiv. leftdiv will contain your menu and either no background, or the same background as the container, and rightdiv will have a different background. You can float leftdiv, and rightdiv, but then make sure you put overflow:hidden on the container so that it will expand to contain the heights of both divs.
Kensino
Member
70 Points
185 Posts
Re: Vertical Columns
May 14, 2012 06:40 PM|LINK
Motley,
This is what I tried to do. I have a container with 2 columns inside it, one for main content and one for a side bar. I have the sidebar the same color as the container and the main column has a background on it.
But I need the columns to be side by side, and I floated them. As soon as I float the left and right columns, the are no longer INSIDE the container because they are taken out of alignment from the rest of the web page. So that container no longer stretches completely around the columns and the background on the left column doesn't work right.
How can I keep them still inside the container after I have floated them? Do I need to float the container as well?
p.s. I seen the faux columns a while back and I don't like them. I want to do this without having things. It's a pretty basic design so it shouldn't need all that.
Kensino
Member
70 Points
185 Posts
Re: Vertical Columns
May 14, 2012 06:42 PM|LINK
EDIT: Ok, I think I see what you are saying with the overflow hidden on the container, so that it will fix my problem, but why does that work? How does that make the container stretch around the columns?