Hi. I'm building a page without tables, and I ran into the stupidest dead end. The page is three columns, fixed width but elastic height.
The problem is, that I put everything in divs, and no matter what I do to get the second column to shift over to the first column's right (its at the bottom), it either screws up everything else, or just doesn't work. I came really close by setting both columns' [display:table-cell], but this only worked in firefox, and not ie.
I've tried absolute positioning as well, although I'm not entirely sure if i've been doing it right, but it comes out completely screwed. This might also be a bad idea, since the page will have some dynamic data and the div heights will probably change from time to time change...
How can I achieve this goal (having my divs side by side) without creating a slew of problems to wade through?
But...you know...no pressure
Okay.
Firstly, don't panic... you've jsut stumbled upon the major drawback of CSS over Table designs.
It is not particualrly a fault of CSS, more a fault of Browsers not really supporting things consistently.
But there are methods to fix it.
Firstly, if you have seperat DIVs, they will not "share" the height of the page, in most cases they will stretch to accomodate their own content, and stop at that point.
To fix it, we will use a bit of smoke and mirrors.
You can use a "wrapping" div to contain your 3 columns, an apply any background colours/images to that/those.
So, if you can, think of Divs as Glass Boxes.
We have the option of either putting a box within a box, or putting a box infront/behind.
So, you have 3 columns... and probably three distinct colours/bgs - one for each.
So we will want a set of 3 nested (inside each other) wrappers to hold the Background.
So have...
<div id="column1bg">
<div id="column2bg">
<div id="column3bg">
<div class="clear"> </div>
</div>
</div>
</div>
We will "pad" each of those on a single side, the same amount of padding as we intend for our column widths - col1=200px, col2=whateverisleft, col3=150px.
#column1bg
{
margin: 0;
padding: 0 0 0 200px;
background-color: blue;
}
#column2bg
{
margin: 0;
padding: 0 150px 0 0;
background-color: green;
}
#column3bg
{
margin: 0;
padding: 0;
background-color: pink;
}
.clear
{
margin: 0;
padding: 0;
font-size: 1px;
line-height: 1px;
}
Now, we want to tackle the actual columns.
NOTE: these are placed inside of column3bg but above the div with the class clear!
So, inside those three divs, we want to put our content columns.
A slightly different approach is required for this though.
Instead of all three being inside each other... we will have one parent, holding two children.
<div id="column1outer">
<div id="column2outer>
</div>
<div id="column3outer">
</div>
</div>
#column1outer
{
margin: 0;
padding: 0;
background-color: red;
}
#column2outer
{
margin: 0 -1px 0 -200px;
padding: 0;
width: 200px;
float: left;
#display: inline; /* IE bug Hack */
position: relative; /* IE bug Fix */
background-color: red;
}
#column3outer
{
margin: 0 -150px 0 -1px;
padding: 0;
width: 150px;
float: right;
#display: inline; /* IE bug Hack */
position: relative; /* IE bug Fix */
background-color: red;
}
I believe that will give you a set of 3 red boxes, next to each other, held within the three nested BG divs.
To test it, remove the Red from the outer columns and type in some text.
So, you should have....
<div id="column1bg">
<div id="column2bg">
<div id="column3bg">
<div id="column1outer">
<div id="column2outer>
</div>
<div id="column3outer">
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
As you add more <p> and <br>/<br /> s... you will see that the outer boxes stay there relative sizes, but the BG boxes should stretch!
...
<div id="column1bg">
<div id="column2bg">
<div id="column3bg">
<div id="column1outer">
<div id="column2outer>Left Column
</div>
Main column Content?
<div id="column3outer">Right Column
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
Let me know how that goes (it's from memory!).
If that fails... I'll have a look at one of my sites and C&P for you!
haha, ill try in the morning. I got a little mad and went with a table anyway ;P. I was struggling with an AJAX crash course all day and I gotta say it seems a little daunting.
BTW, thi is the second time you've helped me in this forum...thanks
Well, as I said, give it a go and let me know :)
well one problem solved, one more to fix.
By the way, the .clear class should have a {clear:both} statement, right?
anyway, if you would like to look at my new prblem, i uploaded it to our test site:
http://treg.110mb.com/buzzcomb/default.php
In case you dont notice it, it cuts off the ADbox picture a little in ie, and a bit more in firefox
oh and i apologize for the messy css...im so lazy
Okay.... you have to becareful with the CSS.
You have both Float and display:inline applied to the right advert... why?
the display:inline could be used for an IE bug fix.... but no margins are applied to the flaoted element, so there is no real need?
Additionally, no widths are applied to the Div... only for the Image.
This can cause some rending issues in certain browsers as well.
So, if in doubt, try applying the exact Width to the Div.... but do be carefull of applying padding as well!
To be completely safe, if your image is 120 x 620, and th Div has padding of 30px 0 0 13px, then make the Div width 133px and height 650px...
see what that gives you.
I find it easier to use "base-blocks" with no paddings etc... ensure it all fits, then start altering widths/heights/margins/paddings, whilst checkig in different browsers - always makes it easier to ensure they render correctly!
(as a suggestion, you may want to check in 2 different version of MFF as well - they often display differently!)
I found that I had to apply a float: left; style to each column to get them to stay aligned.
But I find that if the content is wider than the browser window, the structure falls apart.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.