Hello, I'm having trouble getting a new layout to behave properly. You can view an example here:
<!-- m --><a class="postlink" href="http://www.phenixmarketing.com/project/test.html">http://www.phenixmarketing.com/project/test.html</a><!-- m -->
I am trying to get 2 columns withing the content section to size according to the content they contain but each needs to size proportionally to each other. Right now the right column resizes according to content and the border between the footer and content is moved down proportionally. But the left column flows beyond the content section and under the footer section.
I've been playing around with different absolute and relative positioning for the 2 columns for quite some time and so far, this is the only way I've been able to get them to show up side-by-side:
div#column1 {
background-color: #2bf801;
position: absolute;
left: 0px;
top: 0px;
width: 350px;
}
div#column2 {
background-color: #a934f6;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
position: relative;
width: 350px}
Does anyone know how to accomplish the behavior with the columns that I am looking for? In a table layout, this would be simple as each column would be a cell that would then resize the entire row proportionally. But I'm trying to keep up with the Jones's here and learn this nifty CSS design technique
Thanks!
PeteDo a search here, or <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w -->, or on the web for "faux columns", and you'll have a solution.
<!-- m --><a class="postlink" href="http://www.phenixmarketing.com/project/test.html">http://www.phenixmarketing.com/project/test.html</a><!-- m -->
I am trying to get 2 columns withing the content section to size according to the content they contain but each needs to size proportionally to each other. Right now the right column resizes according to content and the border between the footer and content is moved down proportionally. But the left column flows beyond the content section and under the footer section.
I've been playing around with different absolute and relative positioning for the 2 columns for quite some time and so far, this is the only way I've been able to get them to show up side-by-side:
div#column1 {
background-color: #2bf801;
position: absolute;
left: 0px;
top: 0px;
width: 350px;
}
div#column2 {
background-color: #a934f6;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
position: relative;
width: 350px}
Does anyone know how to accomplish the behavior with the columns that I am looking for? In a table layout, this would be simple as each column would be a cell that would then resize the entire row proportionally. But I'm trying to keep up with the Jones's here and learn this nifty CSS design technique
Thanks!
PeteDo a search here, or <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w -->, or on the web for "faux columns", and you'll have a solution.