How to place modules side-by-side

Hi,

http://web633.webbox239.server-home.org/ver01/de/

I want to place the "search" and the "language-flags" side-by-side (see image) and NOT one above the other. Could you give me a hint how to do that?

They are both published on the "search" module position.

thank you!

Hi,
Try add to the override.css

Code: Select all

#gkSearch {
width: 75%;
}


and change this:

Code: Select all

.myposition {
float: left;
width: auto;
}


to :

Code: Select all

.myposition {
float: right;
width: auto;
}


remember to enable override.css option in template settings.

wow you are awesome! works superb! thanks!!!

But the strange thing is: In Firefox I cannot click the flags. It does not show as a link. It works in Chrome and IE.

When I publish the flags in another position firefox recognises the flags as links.

I use Firefox 12.0

It is happend becasue you are using negative top margin for menu. And its cover lang. So they aren't clickable. To fix it please change in override.css

Code: Select all

#gkMenuNav {
    float: right;
    margin: -30px 0 10px;
}
#gkMenu {
    margin-top: 40px;
}


to:

Code: Select all

#gkMenuNav {
    float: right;
    margin: 0 0 10px 0;
}
#gkMenu {
    margin-top: 10px;
}


works! thanks a lot!

Hello,

i know this is an old post but actually I have the same problem only with another module position and 3 modules which I want to place side by side. I already tried some stuff myself, but I couldn´t really figure out how to do it in my case as I have very little experience with css, ...

My website: http://www.niklasinchile.com/

On "Startseite" i want to place the three modules with suffix "border 1" in a row in module position "mainbody". Actually just like in the demo template http://joomla30.gavick.com/.

I would be very grateful for any help with this!

Thanks a lot in advance,

Niklas

@niklasb please add own suffix to those module for example " my suffix" and then add to override.css

Code: Select all

.box.border1.mysuffix {
    float: left;
    width: 30%;
}


and remember to enable override.css option in template settings.

Thanks for your fast response!

I tried it but I suppose i did something wrong as it doesn´t work..

- I enabled css override in template settings

- in the modules under advanced settings I set module class suffix to "mysuffix"

- and then i edited the override.css with a text editor, pasted your code, deleted override.css with filezilla and uploaded my override.css

This is all, did i do anything wrong?

Thanks a lot!

I thought you want to have 'border1' suffix too. So I gave you code which will work if you will have two suffixes " border1 mysuffix". If you don't want it just change my code to:

Code: Select all

.box.mysuffix {
    float: left;
    width: 30%;
}


No you were right, i also want to have border1. And now it works. Great, you helped me a lot! Thank you very much!

I don´t want to steal more of your time, but is there any possibility that there is more space in between the boxes?

Change my code to this one:

Code: Select all

.box.border1.mysuffix {
    float: left;
    width: 28%;
    margin-left:15px !important;
}


and decrease or increase margin value to fit your needs. But remember when you increase margin you need to decrease width to keep modules in same line.