473,702 Members | 2,335 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

2 column CSS layout help needed...

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
9 1834

"Xavier van Unen" <xv*@xtendrepai r.nl> wrote in message
news:1u******** *************** *****@40tude.ne t...
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
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="addTex t('col1')">Add text to Floating Div Column
1</button>
<button onClick="addTex t('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.getEle mentById(id).in nerHTML = txt;
}
</script>
</body>

Mar 29 '06 #3
"Xavier van Unen" <xv*@xtendrepai r.nl> wrote in message
news:1u******** *************** *****@40tude.ne t...
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
>> 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
> 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
In article <15************ *************** ***@40tude.net> , Xavier van
Unen <xv*@xtendrepai r.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
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
In article <1f************ *************** ***@40tude.net> , Xavier van
Unen <xv*@xtendrepai r.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
In article <1e************ *************** **@40tude.net>,
Xavier van Unen <xv*@xtendrepai r.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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
3312
by: Zak McGregor | last post by:
Hi all I have a simple 3 column css layout here: http://www.carfolio.com/newlook.dhtml However, when the centre column is wider than the screen (yes, it does happen on some pages on the site and no it can't happen differently) then the 3rd column overlays itself over the middle column's content. Is there a css-based 3 column layout without ugly hacks that will give me a 3rd column as far to the right as need be? Can anyone suggest a...
16
6163
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? Ideally the layout would be centered so it scales better visually. This would be great for me. Thanks,
5
169726
by: Jean Pion | last post by:
Dear readers, Can anyone explain how to set column width of a table in ccs. I use the following style in an external stylesheet: table.tbl { table-layout:fixed; border-top: 5px solid #333; border-collapse: collapse; background: #fff; width: 95%} table.tbl td { border-bottom: 1px dashed #33ccff; padding: 2px 5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
10
9201
by: Luke | last post by:
Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it will not grow when content inside div.body is greater than width of window of user agent), anyway anyone knowlegable can see it in sources...
14
4850
by: Anoop | last post by:
Hi, I am new to this newsgroup and need help in the following questions. 1. I am workin' on a GUI application. Does C# provides Layout Managers the way Java does to design GUI? I know that it can be done using the designer but I intentionally don't want to use that. The one reason is that you cannot change the code generated by the designer. The other could be that you have more free hand and control to design your GUI. 2....
31
3098
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would like the middle column just to use up that space instead. Any way this is possible? Thanks for your help, it is highly appreciated!
12
2184
by: Yofnik | last post by:
Hello All, If this is not the appropriate group for this post, please point me in the right direction. I am trying to create a layout that has three main columns. The primary content is the left most column. The width of this should be variable depending on the size of the browser window. The middle and right columns should have a fixed width of 200 pixels. I can get the middle and right columns working as expected. I can't figure out...
3
3771
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have the 2nd and 3rd columns fill the remaining space but I've given up on that and am willing to settle for the second row to have a fluid 3-column layout (or something else simple). Anyway, I've developed a page where the second row has this 3...
1
8899
Death Slaught
by: Death Slaught | last post by:
I will be showing you how to make a very simple but effective three column layout. First we will begin with the HTML, or structure, of our three column layout. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
0
8739
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8652
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9089
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8983
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6575
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4412
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4667
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3107
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2036
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.