473,898 Members | 3,135 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Match height of greater column

dlite922
1,584 Recognized Expert Top Contributor
This might be a javascript problem, but I want to see if there's any way in CSS to do it first.

I have two floating divs, one wide on the left contains the "content" of the page, the second narrow one contains a skyscraper (vertical) advertisement.

Since the height of the content could be more or less than the advertisement, I want the advertisement column to match the content height IF the content is longer, or the content height match the advertisement if content is smaller than the advertisement-container height.

If I set a minimum height the content will still extend past it if the content is long, I don't want to add scroll bar to content div.

Here's an example page:

http://www.zankobooks.com/faq

Thanks for any help, I think I can do it with javascript, but I'd have to assign IDs to the divs and make sure all the content containers on all pages have the same ID. THEN i'll be able to put it in my global js file to match the height values.

Thanks!



Dan
Dec 10 '08 #1
2 6228
drhowarddrfine
7,435 Recognized Expert Expert
I'm on the road so I can't look up my solution. Couple options. Google for 'faux columns'. Personally, I find it icky but a lot of people use it. Second option is using absolute positioning but that may complicate things. And c) would require wrapping a couple additional divs around the whole thing but may not be as complicated.

So, for that, google for "equal height css columns".
Dec 10 '08 #2
serdar
88 New Member
Equalising Columns in CSS

Before you start you should know that the only element that will base its height dependent on another elements height is a table-cell. Therefore if you want equalising columns in your layout then a table may still be the best alternative until there is full-support for display:table.

There are some ways however to give the illusion of equal columns and I will show you some techniques below which vary in difficulty and usefulness.
Dec 15 '08 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

2
1607
by: Roland Wolters | last post by:
Hi, I need to show an image in the header of an asp page. If the image's width is greater then 82 pixels, the header gets mis-formed. If I specify the height for the image and it is smaller then 82 pixels it gets stretched and misformed. How do I solve this? At first I planned to write a vb-dll that checks the image's height but since the image come's as a BLOD from sql-server tat is a no-go.
2
6367
by: zing | last post by:
Hello, I want to define n columns that appear with specific background colors, different to the body background (i.e. so you can see the area they occupy). I want the columns to be of the same height but I don't want to use absolute positioning. I want the height to be determined by the height of the longest column. I've defined the columns using inline <span> elements surrounding the column content. All works fine except the height.
2
2435
by: JJ | last post by:
I'm looking to use two div elements to create two columns within a container div element. I'd like the container div to dynamically have a height greater than the internal column with the greatest height. Is there a way to accomplish this without the use of tables? I know that absolute & float elements aren't part of the flow of the page, but the examples I've seen suggest using either one of those approaches for a column layout. ...
3
6628
by: Lamberti Fabrizio | last post by:
I've got the problem described in the table above. I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see. I've defined the following styles: div.test { background-color:red; height:100%; width: 100%; } table.test { border: 1px solid #CCCCCC; background-color:yellow; } td.test { border: 1px solid #CCCCCC; }
3
4068
by: Stan Brown | last post by:
My CSS file validates with one error message. I've stared at the line in question, and I just can't see what's wrong. Could someone maybe point out what I'm missing? Thanks very much! validator: > http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Foakroadsystems.com%2Fscreen.css&warning=2&profile=css2 error message: > * Line: 352 Context : div.clear > Invalid number : line-height Parse Error - css file:
1
1727
by: Steve Richter | last post by:
I have a simple table with two columns. The first column contains 5 lines of text. The second column contains an iFrame. The iFrame in turn contains a web page. The problem is it does not display at all like I would like it to. I want the column height to expand to the contents of either column. Instead, since I guess the browser does not know the height of the IFrame column, it is the height of column 1 that determines the height. ...
0
2043
by: gferris | last post by:
Hello, I am having an issue with a table that I cannot quite figure out. I have a two-column table with the left column comprising of 4 cells and the right column comprising of one cell with a rowspan of 4 (see http://72.3.212.120/Example1.html). The first three cells in the left column will contain content, as will the one cell in the right column. The fourth cell in the left column is only there to take up the slack in case the content...
1
2129
by: JJ | last post by:
Is it possible to count the number of columns that match certain conditions and return a single value? For example in the database we have a record where: Column 1 = Male Column 2 = A Column 3 = B Column 4 = D Column 5 = M
3
5179
by: benn600 | last post by:
I'm in the process of taking an old table laden, poor code design web site and updating it to a modern day, mostly standards compliant design with only CSS where possible. I'm not having trouble with the header or footers. Essentially, I have a two column layout. The entire site is configured to a width with auto left and right margins to keep everything centered. Is there a better way for doing this? I don't have a full div wrapper with...
1
10954
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,...
0
10487
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9662
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
8036
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
7191
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5882
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
6078
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4708
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
2
4297
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.