By Bluefive on

Hi,

I'm looking to be able to display 3 content blocks side by side by side in the content region area.

Is that possible? I've been playing with views and panels, but haven't been able to get it to do what I need.

An example of what I'm referring to is here http://www.mshale.com. Here it's 2 blocks in the content are side by side. I'm looking for 3.

Also I know this is probably simple to do, but I'm new at this, how can I make any blocks I put in the content area look like the ones in the sidebar area. In other words, with borders and rounded edges. Currently blocks in the content area are borderless.

Thanks in advance for any help.

Peter

⋅ Categories: Drupal 5.x

Comments

eddy147’s picture

eddy147 commented

html:

css:
#wrapper{
width:500px; /* width of your content */
}
#block1, #block2, #block3{
width:150px; /*max 1/3 of the width of the wrapper */
float:left;
display:block;
}

Bluefive’s picture

Bluefive commented

How do I add the border to stories in the content region? So it matches how the sidebars look.

Thanks

xjm’s picture

xjm
she/her
Primary language English
commented

Apply borders to #block1, #block2, and #block3 using CSS. E.g.:
#block1, #block2, #block3 {
border: solid 1px #ccc;
}

You can change the width, texture, and color of your borders however you like.
http://www.tizag.com/cssT/border.php
You might find it useful to go through a CSS tutorial:
http://w3schools.com/css/css_intro.asp

outofthegallery’s picture

outofthegallery commented

this didnt work for me at all, instead all of the content in the node including all of the blocks appeared in a single thin column all on top of each other. i was pasting the code in the themes/garland/style.css file. is that right? is there anything else in the file that needs to change to get the 3 block side by side layout?
thanks!

xjm’s picture

xjm
she/her
Primary language English
commented

The instructions above were specifically for that user's site. If the blocks are showing up below each other (sort of "on the next line"), it's possible there's not enough width onscreen to display all three side-by-side. It also sounds like the style is being applied to the wrong element (something that contains the node body).

I don't recommend just pasting snippets of CSS in; CSS should specific to your theme and markup. Think of it more as a sample that you can adapt to your site. (It's hard to make a specific recommendation without a site to reference, or at least source HTML and CSS.)

For creating your own theme, in general, I recommend starting with a theme other than Garland (unless you really like Garland and just want to tweak it a little). The Zen theme is a good choice for a basic "starting point."

outofthegallery’s picture

outofthegallery commented

oh, ok thank you! my site is www.outofthegallery.net and I have finally today acheived the side by side thing using mini-views.
i think for now that serves its purpose, although i would like to change my theme in the near future. thanks for the heads up on the zen theme!