Joomla Templates Club 406,261 posts

[bongyii Friend bongyiiJoin date: May 2009Posts: 16Downloads:0Uploads:3 Thanks: 5 Thanked: 1 times in 1 posts]

#150834

hi ,
i use a custom HTML module to load 2 module (kunena_latest mod, latest_news mod) into the bottom user3 position. That’s ok working, but how to make them line up side-by-side.?

<div style=”float: left”>{module kunena_latest}</div>
<div style=”float: right”>{module latest_news}</div>

I tried above but not working. Any better idea ?

many Thankls.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342568

Please provide a site url to check what could be happening. 🙂

Thanks,
Gabriel

[bongyii Friend bongyiiJoin date: May 2009Posts: 16Downloads:0Uploads:3 Thanks: 5 Thanked: 1 times in 1 posts]

#342585

go here http://www.3dproperty.my

scroll to bottom, look something like attachment. I trial and error to get it work, your may see slightly defferent view later but problem basically is the same.

Another question, how to display module name as well ? Now I put ‘title=yes/no’ seems like no effect.

BIG THANKS .

---

Attachments:

1. 

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342636

wow! ok… this is going to be fun 🙂

There are many things that we need to change in here, but the good news is that they are all related to the same mistake. The lesson you need to learn today is called, “CLEARING FLOATS” (more in Google or in here: http://css.maxdesign.com.au/floatutorial/clear.htm)

In short, if you want to have a float:left container, pop beneath another float:left container, you MUST set clear:left on the second container. This way, the second container will clear ANYTHING that’s being floated to the left before floating itself. does that make sense?

So… because this is not happening in your code, you are getting a very strange layout which in return shows up quite different in IE than in FireFox. (See attachment)

As you can see, you need to clear floats in order to make IE understand that the whole bottom container is not as WIDE as it shows. The messy way to fix this up is to do the following (so you can quickly test it yourself):

Add the red styling…


<div class="clearfix" id="ja-botnav">
<ul id="mainlevel-nav">
<div id="modstalker">
<object style="float: left; clear: left;" width="468" height="60" id="g1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" altHtml="<embed type="application/x-shockwave-flash" width="468" height="60" src="/images/bottom_flash/banner_pos1_bottom.swf"></embed>">
<a style="display: none; font-size: 1px;" href="http://www.dart-creations.com">
<div style="float: left; clear: left;">
<div style="float: right;">
<div style="float: left; clear: left;">
<script language="javascript" type="text/javascript">// You can place JavaScript like this</script>
<ul class="accessibility">
....
...bla bla bla....


Doing this, you are achieving the following:

1. Floating the Flash Banner beneath the footer menu
2. Floating your first Kunena module LEFT, BUT clearing anything thats floating to the left (like the banner itself)
3. Floating your third module LEFT, but only clearing the left module in case the module that floats in the right, grows bigger.

The messy side of this, is that, to show you what happens I styled the flash object, which should really be inside a div container to make things better. The container should have all the styling. Its the same effect, but better.

You can use clear:both when what you are looking for is to float AFTER anything else before it. Just like making a line break, but with containers.

Sooo, applying what you have learned in this “Clear Floats” lesson :), you will get all desired effects, both, for IE and Firefox, plus you will get the layout you are looking for.

Peace,
Gabriel

---

Attachments:

1. 

1 user says Thank You to toymaker for this useful post

1. bongyii

[bongyii Friend bongyiiJoin date: May 2009Posts: 16Downloads:0Uploads:3 Thanks: 5 Thanked: 1 times in 1 posts]

#342684

Thanks for the ‘floating’ thingy great info:) One newbie question here, for module that load into position# ‘user3’ directly without custom HTML module, where to insert the red stying. Thanks again.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342728

You can do the following…

Step 1: Create a new class inside the css file of your choice. (yes… template.css is ok)
Add the following.


left_cfloat {
float: left; /* or right.. depending on your needs */
clear: left; /* or both.. depending on your needs */
}


Step 2:
Now, go inside your module cofiguration, and search for the “Module Class Suffix” parameter and add ” left_cfloat” into it without the “”. (yes.. theres a space in there… its <SPACE>left_cfloat)

What you are doing actually, is adding an extra styiling class to the module.

Let me know if it works ok.

Peace,
Gabriel

[bongyii Friend bongyiiJoin date: May 2009Posts: 16Downloads:0Uploads:3 Thanks: 5 Thanked: 1 times in 1 posts]

#342803

Yesterday I tested ‘clear’ syntax. Side Module get push to below depend on I set to ‘right’ or ‘left’. So it looks this :

Mod A (100% width)
Mod B (100% width)

What I looking for is :
Mod A (50%) Mod B(50%)

or even :
Mod A(33%) Mod B(33%) Mod C(33%)

Anyhow, I successful get Mod A & Mod B to display properly. Only Mod C is the cokpit . It always fill-up entire width left over by Mod A&B . For example :
Mod A (20%) Mod B(20%) Mod C(60%)

I wonder maybe I shouldn’t use ‘float’ and ‘clear’ at all. Maybe something related to ‘span’ and ‘width’.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342820

Thats correct… in my example I did not use clear for all of them

for example…
Mod A (Float left) Mode B (float left)
or
Mod A (Float left) Mode B (float right)
This will put both mods side by side

Mod A (Float left) Mode B (float left ; clear left)
This will put Mod B below Mod A

Mod A (Float left) Mode B (float right;) Mod C (float left; clear left)
This will put Mod A besides Mod B. Mod C will drop below mod A. If Mod B is twice the height of Mod A it will also keep showing to the right of Mod C as Mod C is only clearing the left Mod A module

Mod A (Float left) Mode B (float right;) Mod C (float left; clear both)
This will put Mod A besides Mod B. Mod C will drop below both Mod A and Mod B. If Mod B is twice the height of Mod A, Mod B will show below the module that has the greatest height. in this case, Mod B. so there will be a blank space between Mod A and Mod C.

As a side note… what im helping you with is to place modules correctly inside ONE USER POSITION… but only positioning. We are not playing with the widths they have. If you would like to do so, please add the width property and see what happens 😉

Hope it helps.

Peace,
Gabriel

[Author]

Posts