dlite922 1,584
Recognized Expert Top Contributor
I'm not sure why this is so complicated...
I simply want 3 equal width columns with equal height that grows to contain the longest column, all wrapped in a 1000px width container. HTML: -
<div id="wrap">
-
<div id="col1">
-
-
</div>
-
<div id="col2">
-
-
</div>
-
<div id="col3">
-
-
</div>
-
<div id="clear"></div>
-
</div>
-
Here's a screen shot of what I'm looking for: ![](/images/imgserve.php?url=http://i.imgur.com/SFD5J.jpg)
See how the first two column heights match the 3rd (longest) column?
Why do I want this? These columns will have a border and it looks tacky if one's short, etc. CSS: -
#wrap {
-
width: 1000px;
-
background-color: #333;
-
}
-
-
#col1 {
-
float: left;
-
width: 300px;
-
border: 1px solid white;
-
background-color: red;
-
}
-
-
#col2 {
-
width: 300px;
-
padding-left: 310px;
-
padding-right: 310px;
-
border: 1px solid white;
-
background-color: blue;
-
}
-
-
#col3 {
-
float: right;
-
width: 300px;
-
border: 1px solid white;
-
background-color: green;
-
}
-
-
.clear {
-
clear: both;
-
}
-
IE6+ compatible.
Any examples? where am I going wrong? Firefox render's this all over the place but don't know what's wrong.
Thanks for any help,
Dan
8 2879 JKing 1,206
Recognized Expert Top Contributor
A couple things here.
1) You have created a clear class in your css but you reference a clear id on your div. - <div class="clear"></div>
2) Col2 is extremely large once padding is taken into consideration. Your total width for that element including the border would be 922px leaving very little room for your other columns. For now I would remove the padding and leave that until the end. With all the columns in a 1000px width you have 94px left to pad them with.
3)Col2 needs float:left;
That should get all your columns lined up in the proper order.
JKing 1,206
Recognized Expert Top Contributor
To solve the problem of equal height there is a few methods to choose from however because you are using borders it can be more difficult.
I suggest going the javascript route to solve this problem. It works in all browsers and few users have it disabled. If they do have it disabled the site wont be broken just not as pretty.
There are CSS tricks too and you may prefer those,
Here is a good link: Equal Column Heights
An easy fix using CSS would be to apply the "min-height" attribute in each of your columns:
Use this in each of your CSS column descriptions, or create a class and apply it to all three columns. Just make the size slightly larger than your largest column and they will all be the same size. This will not "grow" dynamically as you add content though. If your largest column grows taller than the min-height you specified, just go back and change the class.
3 columns is easier than you'd think. The best way is to position each column 'absolute' and set the top/bottom to the top/bottom of its containing parent. I'd give more detail but I'm really, really busy.
kovik 1,044
Recognized Expert Top Contributor
JKing, that link's pure CSS solution is very interesting. I have to wonder who thought of that and then implemented it. o.o
dlite922 1,584
Recognized Expert Top Contributor
Thanks for all the replies. I ended up going with fixed height. I'll have to manually change it if content grows (BLEGH! UGLY!).
The javascript worked fine as well. simple one-line jquery, but I forget the reasons why I abandoned this.
We need HTML 5 and all these issues fixed.
All old browsers (such as <IE 7 and below) should automatically EXPLODE when HTML 5 comes out.
Thanks,
Dan
kovik 1,044
Recognized Expert Top Contributor
If we could get enough websites to completely remove support for older browsers and place large notifications on their websites for users of outdated browsers to update, we could do that.
In fact, only Facebook would need to have the notification. Problem solved.
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: SoloCDM |
last post by:
How do I keep my entire web page at a fixed width?
*********************************************************************
Signed,
SoloCDM
|
by: Andrew |
last post by:
Could someone please tell me why this simple table test is completely
mangled by Netscape?
HTML:
<TABLE WIDTH="90%" ALIGN="center" BORDER="0" CELLPADDING="0"
CELLSPACING="1" BGCOLOR="Black">
<TR>
<TD WIDTH="100" HEIGHT="20" ALIGN="center" BGCOLOR="#eeeeee"
NOWRAP>Left Cell</B></TD>
<TD WIDTH="100%" HEIGHT="20" ALIGN="center"
|
by: Not4u |
last post by:
Hello,
I have a problem with CSS code.
I want to have one menu column with a fixed width and a 100% height and
the rest of the page for content.
----------------
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|.N.|----------|
|.U.|----------|
|
by: John Smith |
last post by:
Here is my HTML table formatting code.
<table border="1" width="100%">
<tr width = "100%">
<td
width="33%">11asdhagdshaskgashjgahjgadhjgdjshdgasjdgajdgadjhgdgahjdgadhjsgad
|
by: joshthomas99 |
last post by:
Hello,
Yes, I've spent hours reading through all the old postings and
searched
the net - but couldnt find a solution to the 100% height problem with
nested divs.
Basically I want the first box to be 250px high, and the one below it
to take up the rest of the browser window. I have a big div around the
lot (set to 100% height), and thought that the bottom div would fill
| |
by: wokm4n |
last post by:
Hi,
I'm currently working on this:
http://www.richardvenneman.nl/kazenokoe
The left part of the 'latest releases' is fixed width. A random image
appears on the right side.
But there seems to be some problems with IE6 only.
This is what it looks like: http://img258.imageshack.us/my.php?
image=ieca5.png
|
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!
|
by: Alexander Eisenhuth |
last post by:
Hello alltogether,
is it possible to format stings with fixed width of let's say 7 character. T
need a floating point with 3 chars before dot, padded with ' ' and 3 chars after
dot, padded with '0'.
Followingh is my approach
'21.100'
But there are missing ' '. How can I get that? (For bigger numbers than 999 they
|
by: Jeff |
last post by:
Hey
I'm wondering how the Fixed-Width Text Format is
What I know is that the top line in this text format will contain column
names. and each row beneath the top line represent for example a row in a
table etc...
But does fixed-with mean that every column has a fixed with: for example
first column is 10 char wide and second column is 30 char wide?
|
by: Christopera |
last post by:
Hello,
I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are then smaller than the website is wide. I have tried fixed positioning but then i get the dreaded overlap when the browser is smaller than the website. Absolute positioning gets rid of the overlap but then brings on the width issue. Is there a way to...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
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...
|
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,...
|
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...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
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...
| |