14 replies [Last post]
Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Hello Wink!

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 Smile!

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

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Anyone?

Anyone? Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

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; }

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

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, Sad .. 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!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

The link is working here :\

The link is working here :\ !

Thank you for checking it, I'll be waiting Smile!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

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! Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Tried a lot of things, and

Tried a lot of things, and the best I could do is:

http://localhost/froolo/pula/testindex.html Stare

Is this hard or am I not seeing something :\

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

We can't see localhost Can

We can't see localhost Tongue

Can you post the code?

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

LOL, sorry for the localhost

LOL, sorry for the localhost !

http://www.froolo.com/pula/testindex.html ! Check sources to see the code !

Tiago
Offline
Regular
Portugal
Last seen: 14 years 5 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Anyone ?

Anyone Smile?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.