Hi,
I'm trying to get two blocks placed next to each other horizontally in the header part of my page.

This is the cs code im using:

#block-block-5 {
margin: -0.5em 0 -0.8em 0;
display: inline;
}

#block-block-5 .block-content {
text-align: center;
border-style: none;
background-color: none;
background: url(../images/blockbg.gif);
float: left;
padding: 0px;
margin-right: 2px;
}

#block-block-5 .block {
padding: 0px;
margin: 0px;
float: right;
}

#block-block-17 {
height: 20px;
width: 250px;
margin: 0 0em 0em 0em;
padding: 0 0em 0em 0em;
background: transparent;
background: url(../images/blockbg.gif);
}

#block-block-17 .block-title {
background: transparent;
background: url(../images/blockbg.gif);
color: #000; }

#block-block-17 .block-content {
background: url(../images/blockbg.gif);
}

No matter what I've tried, like margin-right settings or other settings like that, I am unable to get the two blocks placed next to each other horizontally.

Would you kindly tell me the correct code that will place them horizontally next to each other in the header?

Thank you

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Set a width and float them left:

#block-block-5,
#block-block-17 {width:250px; float:left;}

If these are going into the header-blocks region you'll want to add a clear-block class to it:

<div id="header-blocks" class="section region clear-block">
mxer269’s picture

mxer269 commented

thanks! where do i add this code: div id="header-blocks" class="section region clear-block?... page.tpl?

the current code for the header is this:

div id="header" class="header clear-block"

mxer269’s picture

mxer269 commented

got it working!

I added the div tag like you said and set the width, only for one block i have float: right; and the other float: left;

here's my css:

#block-block-17 {
height: 20px;
width: 250px;
margin: 0em 10em 0em 0em;
padding: 0em 0em 0em 0em;
background: transparent;
background: url(../images/blockbg.gif);
float: left;
}

#block-block-17 .block-title {
background: transparent;
background: url(../images/blockbg.gif);
color: #000; }

#block-block-17 .block-content {
background: url(../images/blockbg.gif);
}

#block-block-5 {
margin: -3em -2em -0.9em 0em;
width: 150px; float: right;
}

#block-block-5 .block-content {
text-align: center;
border-style: none;
background-color: none;
background: url(../images/blockbg.gif);
padding: 0px;
}

Will this code be ok for all resolutions (notice i am using negative #'s for the margin values) or is the spacing of the blocks on the header going to change based on the resolution?

Thanks again for the help!

Jeff Burnz’s picture

Jeff Burnz commented

Depends if your theme is fixed width or fluid, if its fluid the block with no width is going to compress (unless something inside it as a width).