How to place modules side-by-side

Professional Jomal template designed to be easily adaptable to all kinds of business
GK User
Mon Jun 25, 2012 11:50 am
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!
User avatar
Expert Boarder

Konrad M
Mon Jun 25, 2012 12:08 pm
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.
User avatar

GK User
Mon Jun 25, 2012 12:45 pm
wow you are awesome! works superb! thanks!!!
User avatar
Expert Boarder

GK User
Mon Jun 25, 2012 1:02 pm
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
User avatar
Expert Boarder

Konrad M
Mon Jun 25, 2012 1:16 pm
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;
}
User avatar

GK User
Mon Jun 25, 2012 1:23 pm
works! thanks a lot!
User avatar
Expert Boarder

GK User
Fri Mar 22, 2013 12:27 pm
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
User avatar
Fresh Boarder

Konrad M
Fri Mar 22, 2013 12:49 pm
@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.
User avatar

GK User
Fri Mar 22, 2013 1:37 pm
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!
User avatar
Fresh Boarder

Konrad M
Fri Mar 22, 2013 1:42 pm
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%;
}
User avatar

GK User
Fri Mar 22, 2013 4:09 pm
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?
User avatar
Fresh Boarder

Konrad M
Mon Mar 25, 2013 9:50 am
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.
User avatar


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.