Sun, 2007-02-11 16:34
Hello 
!
So here is the problem. I've one design that as 3 blocks.. And I can't get the 3rd one fixed at the right.. I'll attach some images so you can see the problem 
!
Everything works nice, but when I try to add another div to fill the 1st and the 2nd block, the 3rd one goes down.
Here at dreamweaver it looks great:
http://media.pixpond.com/6pqdr.jpg
And at the browser........:
http://media.pixpond.com/1v5c0k.jpg
Here is the css and html for this section of the page:
HTML
Informa
Mon, 2007-02-12 08:03
#1
Anyone?
Anyone?
Mon, 2007-02-12 08:15
#2
What you want is quite
What you want is quite easily done.
But, the div you want at the foot of the two left most divs, do you want it directly beneath the longets of the two, or at the bottom of the page if the right most div is longer, but not underneath that right most div?
I'm off to work, so any reply make take a few hours.
Mon, 2007-02-12 10:36
#3
Here's an example for
Here's an example for you:
HTML:
Your Page Title Here
@import url("style.css");
This is the
Main Content - Left
This is the
Main Content - Right
This is a test of whether this div works properly or not.
This is the Right Sidebar
This is Sub-Header #1 (with Fixed Height)
This is Sub-Header #2 (with Fixed Height)
CSS:
/*** Style for RSB 2 Column Template ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#F2F6F9; /*** Background colour of page ***/
min-width:930px; /*** Content Width ***/
text-align:center;
}
input,select{
margin:0px;
padding:0px;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:930px; /*** Content Width ***/
display:table;
height:100%;
background:#FFCCCC; /*** Background colour of right column. ***/
}
#wrapper{
display:table-cell;
position:relative;
}
#outer{
position:relative;
width:620px; /*** Center Column Width ***/
background:#ADD8E6; /*** Background colour of center column. ***/
height:100%; /* Need for color in FF */
}
#float-wrap{
width:620px; /*** Center Column Width ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
width:620px; /*** Center Column Width ***/
float:left;
}
#right{
float:left;
display:inline;
width:310px; /*** Right Column Width ***/
margin-right:-310px; /*** NEGATIVE Right Column Width ***/
position:relative;
}
#clearheadercenter{
height:90px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderright{
height:90px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:930px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subfooter1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:50px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
width:930px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:25px;
overflow:hidden;
}
#subheader2{
margin:0px;
background:#FFE7AA;
text-align:center;
height:65px;
overflow:hidden;
}
#container-right{}
#container-center-right,#container-center-left{
width:310px;
float:left
}
#container-center-right{}
#testdiv{
clear:both;
background:blue;
}
Mon, 2007-02-12 20:39
#4
Wow, that example is great
Wow, that example is great .. But I don't really want to dig on it, since I spent so much time on mine..
"But, the div you want at the foot of the two left most divs, do you want it directly beneath the longets of the two"
Yes, the other 3column is the menu so it must stay there, but I need to be able to continue adding content beneath the other two columns.
Here is the working example of the whole website http://www.froolo.com/pula/ (The server might be a little slow).
Then, after doing some testing the 3column goes down at Internet Explorer 6, 
.. It works great on 7 and with Firefox .. Do you know any possible hack?
If you have time, please check the code and the css to see if there is an alternative!
thank you for your help!
Mon, 2007-02-12 21:43
#5
That link is broken. When
That link is broken.
When it is up and running (I'll check again tomorrow, I'll take a look).
You understand I only did the code to show it CAN be done. As with almost any situation, it can be done in many ways using css.
Mon, 2007-02-12 21:54
#6
The link is working here :\
The link is working here :\ !
Thank you for checking it, I'll be waiting !
Mon, 2007-02-12 22:53
#7
Gosh, that link is flaky.
Gosh, that link is flaky. Took some time to see it
OK, the problem is the blocks and the margins add up to almost the total page width.
However, they are all floated, and have margins. IE is quite buggy with floats and margins. It tens to add an extra 3px right margin which you can only get rid of by adjusting the left margin of the next float to the right but only for IE (conditional comments will do it).
if you change the margin on block to 0 5% 0 -3px for IE you will see a change. You will need to play around with this. Also, to avoid a double margin bug, I have found putting display:inline on floated divs works (FF ignores this nonsense setting, a floated div is always display block)
Anway, it's a margin thing. Just remember to use no left margin on floats, but make the right margin do the spacing, then put a -3px on the left just for IE.
Tue, 2007-02-13 16:20
#8
Hm, so ok! It works for IE
Hm, so ok! It works for IE now, just changed the margin from 5% to 3%!
Great job, thank you!
Although, can you do anything about adding the extra div below the 2 first blocks?
Thank you once more!
Tue, 2007-02-13 17:27
#9
Maybe try putting the left
Maybe try putting the left and middle div inside another div that itself is floated left, and then put the div you want after the middle div, floated left but with clear:both so it sits under them. You might need to consider clearing these floats if they overlap.
Tue, 2007-02-13 18:15
#10
Tried a lot of things, and
Tried a lot of things, and the best I could do is:
http://localhost/froolo/pula/testindex.html 
Is this hard or am I not seeing something :\
Tue, 2007-02-13 18:46
#11
We can't see localhost Can
We can't see localhost 
Can you post the code?
Tue, 2007-02-13 18:50
#12
LOL, sorry for the localhost
LOL, sorry for the localhost !
http://www.froolo.com/pula/testindex.html ! Check sources to see the code !
Thu, 2007-02-15 23:28
#13
Anyone ?
Anyone ?
Fri, 2007-02-16 07:24
#14
To an extent, you need to
To an extent, you need to play with things.
However, try adding this code to mainc:
float:left;
width:65%
And then play around with it all. The div for the tiny bit under doesn't have to be floated, I don't think anyway.