I use the theme 'Business' and the standard setting of it is that the teasers of the articles I put on the front page are aligned vertically, but I'd like to have them horizontally in blocks of three--next to each other--instead.

Now I would like to know if it's possible to change this, probably by changing some of the css code (If explained in detail I think I should be able to do this, but I'm rather inexperienced..) and otherwise perhaps with a module I haven't found yet?

I'd be very much obliged.

Edit to answer Volker's question:

I create the teasers automatically when I make a new page: In the menu settings there's an option to 'Promote to front page', which I do and then the link, the image and the first paragraph appear on the front page.

  • Do you use this one? drupal.org/project/business
    – Volker
    Apr 9, 2013 at 13:56
  • There are some more themes named business...
    – Volker
    Apr 9, 2013 at 13:57
  • Yes, sorry, that's the one. When I installed it I was under the impression the 'Highlights' were where the articles would go but it turned out that was not the case--but in comparison with other themes I tried I was most content with this theme so I kept it. :)
    – Claudi
    Apr 9, 2013 at 14:07
  • Ok. Please provide some more information in your question (just edit it ;) about how you create your teasers and how you place them on the front page. Are you using the views module? Panels? If you describe this a bit more accurate, i think there's a better chance to answer your question. Basically, i think you have to edit your CSS, like giving the teaser a class and then add a width and a float:left, so they can align horizontally.
    – Volker
    Apr 9, 2013 at 14:23
  • (edited the question) Where / what exactly would I edit in CSS?
    – Claudi
    Apr 9, 2013 at 14:33

1 Answer 1


I think you'll have to investigate a bit further into your site structure generally. ;)

Assuming that you have content types of articles and basic pages on your frontpage, you could try something like this in your CSS:

.node-promoted {
float: left;
margin-right: 20px;
max-width: 280px;


"node-promoted" is the class one of several classes of teasers of articles and/or basic pages promoted to frontpage. You can use the almighty Firebug-Addon for FF to find this out ...

  • That works perfectly! Thank you! However, is there a way to get it to 2 instead of 3 'boxes', cause I forgot there's a sidebar I'm using .. :B And now the third is posted under the second, leaving a space open to the left, and then the fourth and fifth are posted under that. So what I'm looking for (so sorry!) is two boxes with teasers next to each other , and then two new boxes with the teasers.
    – Claudi
    Apr 9, 2013 at 15:13
  • See, one question leads to another. How do we get from here? Are you willing to spent some time for CSS-Basics? Look here: barelyfitz.com/screencast/html-training/css/positioning at topic number 9... or here: vanseodesign.com/css/understanding-css-floats
    – Volker
    Apr 9, 2013 at 15:18
  • Of course, I'm always willing to learn. :) I looked at it, but I'm not sure (or better yet: I have no idea) how to incorporate that into my question though. :B EDIT I added a height to the boxes and now they align two-to-two. I think this solved it, right? :D
    – Claudi
    Apr 9, 2013 at 15:27
  • Good! The second link in my comment above should give you an idea of how floats are working. Just start with a simple HTML-Page and experiment... happy coding! ;)
    – Volker
    Apr 9, 2013 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.