1

I've got three blocks on my front page and I want them to be centered and aligned.

"About us" block is to be aligned to the left side of the front page what I managed to achieve. The other two blocks are to be aligned to the right side of the front page and one above the other what I managed to achieve as well.

However:

  1. Different browsers show different results which is caused by the reference of the language switcher block I guess. It is moving my right hand side set of blocks up and down. IE is showing the result I would like to achieve (the example: test site).
  2. I would like to be able to reference language switcher block to the content region which is not the case right now and I am not sure how to do it.

Can someone help or guide me into the propriate direction?

Thanks and regards

0

Well, after looking at your code I concluded that your css codes are terrible! you may use this code (I didn't test it but it should work or at least a few modifications will make it to perfectly match what you need):

<div id="content">
       <div id="blocks-container">
             <div id="left-block">
                    //In here load the slider block and display in here
             </div>
              <div id="right-block">
                     <div>
                    //In here load the top right  block and display in here
                     </div>
                     <div>
                     //In here load the bottom right  block and display in here
                     </div>
             </div>
       </div>
</div>

This is CSS

#content{
       text-align:center;
       width:100%;
       height:auto;
       display:inline-block;     
}
#blocks-container{
       margin:auto;
       width: 975px;
       height:auto;
       display:inline-block;     
}
#left-block{
       float:left;
       width: 760px;
}
#right-block{
       float:right;
       width: 215px;
}
#right-block > div{
       clear:both;
       width: 100%;
      float:left;  
}    

Never use margin to align elements to the right, because the margin is calculated based on the parent which in your case is the browser, so If you resize the browser, the browser will try to move the elements to regard the margin.

I recommend you strongly to forget about the DIV and float, try to learn how to work with flexbox it is very easy to use.

  • Many thanks dor the answer. Needless to say that I a starter and what I developed is based on what I could learn after I followed few youtube tutorials. Can you just let me know where/hiw I can add divs you suggested? – KuzmaN Mar 16 '15 at 6:40
  • How did you start drupal when you know nothing about html/css ?!,Well just remove the DIV with content id and replace my code in there – M a m a D Mar 16 '15 at 7:15
  • As I've said, I've followed quite few YOUTUBE tutorials and GOOGLED the drupal documentation. This is how I ended up with what I've developed. HTML and CSS, as you could have seen... the basic knowledge hence my question, where/how I should add your suggestion, where exactly (file name) I can replace content DIV with what you suggested? Not sure why I was able to reference "about us" block to the content region and "language switcher" is pointing to the very top of the page?? Why I cannot reference "language switcher" to the content as well? Many thanks again for your help, much appreciated!!! – KuzmaN Mar 16 '15 at 8:09
  • Is this how the structure should look like after I implement your suggestion? div id="content" class="column" role="main"> <a id="main-content"></a> <div id="blocks-container"> <div id="left-block"> <div id="block-views-about-us-front-page-block" class="block block-views first odd"> </div> <div id="right-block"> <div id="block-locale-language" class="block block-locale even" role="complementary"> <div id="block-views-customer-feedback-block" class="block block-views last odd"> </div> </div> – KuzmaN Mar 16 '15 at 12:53
  • You need to write that code in page--front.tpl.php of your theme – M a m a D Mar 16 '15 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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