By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,854 Members | 856 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,854 IT Pros & Developers. It's quick & easy.

2 column CSS layout help needed...

P: n/a
Hi guys and gals,

I'm working on a 2 column CSS layout (for an ordering system) in which it
isn't a priori known which of the two columns will be the longest, that
depends on the (script generated) content. As there is also a following
footer DIV, the usual floating one of the DIVs technique doesn't give the
desired results, and has the floated DIV (if it is the longest one) being
displayed/rendered through the footer DIV.

I understand that this is normal CSS2 behaviour (floated DIVs are taken
outside the normal flow), but I don't understand how to circumvent this
(I'm not as CSS savvy as I would like to be).

I can't imagine that I'm the first one to encounter this problem, and I
would very much appreciate any suggestions or links to possible solutions.

Thanx for your time and trouble.

--
Kind regards
Xavier van Unen
Mar 29 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a

"Xavier van Unen" <xv*@xtendrepair.nl> wrote in message
news:1u****************************@40tude.net...
Hi guys and gals,

I'm working on a 2 column CSS layout (for an ordering system) in which it
isn't a priori known which of the two columns will be the longest, that
depends on the (script generated) content. As there is also a following
footer DIV, the usual floating one of the DIVs technique doesn't give the
desired results, and has the floated DIV (if it is the longest one) being
displayed/rendered through the footer DIV.

I understand that this is normal CSS2 behaviour (floated DIVs are taken
outside the normal flow), but I don't understand how to circumvent this
(I'm not as CSS savvy as I would like to be).

I can't imagine that I'm the first one to encounter this problem, and I
would very much appreciate any suggestions or links to possible solutions.

Thanx for your time and trouble.


What's your setup?

is it:

div a floated
div b floated
div c

or

div a
div b floated
div c?

AFAIK, you're supposed to float each div that you want to follow each other
horizontally. You could have a quick and dirty solution (I started playing
with HTML and CSS last week, so please don't shoot me) with a 2x1 table, 1
row containing div a and div b, both floated left, and div c in the next
row.

GregoryD
Mar 29 '06 #2

P: n/a
jim

Xavier,
Here's a testing page with a script where you can add space to the left
or the right column and experiment with how it works. the css will
cause the div boxes to push the footer down, not over-lap. the padding,
borders & color can be eliminated if you wish; they are added just for
ease of seeing the different boxes and how they change the layout when
the script is applied. (this was designed with dtd transitional for
xhtml). same behaviors show in both msie and ffox. -Jim
----------------------------------------------------------

<head><title> 2 column floating divs</title>
<style type="text/css">
body{ margin:0px; padding:0px; background-color:cyan; }
#col1{
width:47%; float:left; display:inline; height:100%;
background-color:yellow; color:green; font-family: verdana;
font-size:8pt;
text-align:justify; padding:5px; border:2px green dashed;
}
#col2 {
width:47%; float:left; display:inline; height:100%;
background-color:green; color:yellow; font-family: verdana;
font-size:8pt;
text-align:justify; padding:5px; border:2px yellow dashed;
}
#footer{
width:97%; float:left; display:inline; height:30px;
background-color:purple; color:yellow; font-family: verdana;
font-size:8pt;
text-align:center; padding:5px; border:2px white groove;
}
</style>
</head>
<body >
<button onClick="addText('col1')">Add text to Floating Div Column
1</button>
<button onClick="addText('col2')">Add text to Floating Div Column
2</button>
<hr/>
<div id="col1">
pretend a bunch of text is here
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
</div>
<div id="col2">
pretend a bunch of text is here
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
<hr/><br/><hr/><br/><hr/><br/><hr/><br/>
</div>

<div id="footer">
your page &copy; 2006<br/>
</footer>
<script type="text/javascript" >
function addText(id){
var txt = " ";
for(x=0;x<=20; x++){
txt +="<hr/>a bunch of text<br/>";
}
document.getElementById(id).innerHTML = txt;
}
</script>
</body>

Mar 29 '06 #3

P: n/a
"Xavier van Unen" <xv*@xtendrepair.nl> wrote in message
news:1u****************************@40tude.net...
Hi guys and gals,

I'm working on a 2 column CSS layout (for an ordering system) in which it
isn't a priori known which of the two columns will be the longest, that
depends on the (script generated) content. As there is also a following
footer DIV, the usual floating one of the DIVs technique doesn't give the
desired results, and has the floated DIV (if it is the longest one) being
displayed/rendered through the footer DIV.

I understand that this is normal CSS2 behaviour (floated DIVs are taken
outside the normal flow), but I don't understand how to circumvent this
(I'm not as CSS savvy as I would like to be).

I can't imagine that I'm the first one to encounter this problem, and I
would very much appreciate any suggestions or links to possible solutions.

Thanx for your time and trouble.

--
Kind regards
Xavier van Unen


Xavier,

There is quite a simple solution to this. Just add clear: both to the footer
style.

eg.
#content {margin-left: 200px}
#sidebar {float: left; width: 200px}
#footer {clear: both}

This will force the footer to be below all floats. This should work if you
floated one column, or both columns to the left or right (it will even work
for 3 column layouts if you ever do one of those).

HTH,
Martin
Mar 30 '06 #4

P: n/a
>> I'm working on a 2 column CSS layout (for an ordering system) in which it
isn't a priori known which of the two columns will be the longest, that
depends on the (script generated) content. As there is also a following
footer DIV, the usual floating one of the DIVs technique doesn't give the
desired results, and has the floated DIV (if it is the longest one) being
displayed/rendered through the footer DIV.

I understand that this is normal CSS2 behaviour (floated DIVs are taken
outside the normal flow), but I don't understand how to circumvent this
(I'm not as CSS savvy as I would like to be).


There is quite a simple solution to this. Just add clear: both to the footer
style.
#content {margin-left: 200px}
#sidebar {float: left; width: 200px}
#footer {clear: both}
This will force the footer to be below all floats. This should work if you
floated one column, or both columns to the left or right (it will even work
for 3 column layouts if you ever do one of those).

Just before reading your reply I realized the same thing. I had forgotten
to "clear" the footer. This is definately an improvement as indeed neither
column overlap the footer anymore.

The next problem arises now though, as the sidebar column has another
background color than the main content column. If the (floated) sidebar DIV
is longer than the main (non floated) DIV, its background color doesn't
extend to the bottom. I don't want to fake this with a background image, as
I want a good background color as a fallback when the background image
isn't loaded (for whatever reason).

Any ideas anybody?
--
Kind regards
Xavier van Unen
Mar 30 '06 #5

P: n/a
> The next problem arises now though, as the sidebar column has another
background color than the main content column. If the (floated) sidebar DIV
is longer than the main (non floated) DIV, its background color doesn't
extend to the bottom. I don't want to fake this with a background image, as
I want a good background color as a fallback when the background image
isn't loaded (for whatever reason).
Any ideas anybody?

Don't bother guys, I've already managed to fix this one by myself... :o)

--
Kind regards
Xavier van Unen
Mar 30 '06 #6

P: n/a
In article <15******************************@40tude.net>, Xavier van
Unen <xv*@xtendrepair.nl> writes
Any ideas anybody?

Don't bother guys, I've already managed to fix this one by myself...
:o)


And are you going to share your discovery so that others may benefit?

--
Alan Silver
(anything added below this line is nothing to do with me)
Apr 2 '06 #7

P: n/a
Hi Alan
Any ideas anybody?

Don't bother guys, I've already managed to fix this one by myself...
:o)


And are you going to share your discovery so that others may benefit?

Oh yes, of course, sorry. I didn't expect any interest in my humble CSS
dabbling, but I'm more than happy to share my findings.

In the end I gave the container DIV the background color as the sidebar
DIV:

HTML:
<DIV id="container">
<DIV id="sidebar">
bla bla
</DIV>
<DIV id="content">
</DIV>
</DIV>

CSS:
DIV#container {
BackGround: #F90;
}
DIV#sidebar {
Float: left;
Width: 9em;
Color: #FFF;
Background: #F90;
/*BackGround: #F90 url(bg-sidebar-edge.gif) right repeat-y;*/
}
DIV#content {
Margin-Left: 9.1em;
Color: #FFF;
BackGround: #36C;
}

This works fine for a plain orange (#F90) background, but using a
background image in the sidebar messes this up again when the sidebar DIV
isn't as high as the content DIV, the background image wont't extend down
to the footer.... sigh... Back to the drawing board...

--
Kind regards
Xavier van Unen
Apr 3 '06 #8

P: n/a
In article <1f******************************@40tude.net>, Xavier van
Unen <xv*@xtendrepair.nl> writes
And are you going to share your discovery so that others may benefit?

Oh yes, of course, sorry. I didn't expect any interest in my humble CSS
dabbling, but I'm more than happy to share my findings.


You'd be amazed how much your "humble CSS dabbling" could help someone
else who's looking for an answer to this problem. As it happens, I had
been pondering this one for a while and not got very far. Your posting
gave me just the ideas I needed!!

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)
Apr 3 '06 #9

P: n/a
In article <1e*****************************@40tude.net>,
Xavier van Unen <xv*@xtendrepair.nl> wrote:
The next problem arises now though, as the sidebar column has another
background color than the main content column. If the (floated) sidebar DIV
is longer than the main (non floated) DIV, its background color doesn't
extend to the bottom. I don't want to fake this with a background image, as
I want a good background color as a fallback when the background image
isn't loaded (for whatever reason).


I had a similar problem, with a long left-floated sidebar and a short
main content column. Even with clear:both in the footer, the left
sidebar extended below the bottom border of the main column.

I solved it like this. The trick is that "spacer" div contained
inside the main content div at the very END of the main content div.
This "spacer" div contains a clear:both. This worked. Typing from
memory:

HTML:
<div id="header">...</div>
<div id="content">
<div id="leftpanel">
[left sidebar content here]
</div>
<div id="mainpanel">
[main content here]
<div class="spacer">&nbsp;</div>
</div>
</div>
<div id="footer">...</div>

CSS:
#header { ...whatever... }
#content {
background: blue; margin: 1em; padding: 1em; border: 1px solid black;
}
#leftpanel { float: left; width: 10em; background: orange; }
#mainpanel { margin: 0 0 0 12em; background: white; }
#footer { ...whatever...}
..spacer { font-size: 1px; margin: 0; padding: 0; clear: both; }

Hope that helps.

-A
Apr 4 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.