Need help from CSS gurus!

[KayGee]

Hi, here's what I'm trying to do. I have an empty div with a background image (3px wide set to repeat in the x direction), a heading and another empty div with the same background image set to repeat-x. How do I display all 3 elements inline horizontally such that the heading is centered and the left and right empty divs adjust their widths accordingly? I've attached a rough drawing showing what I'm currently getting and what I actually want.

http://i72.photobucket.com/alb...gee_13/block-align.jpg

Here's the code I've been trying.

HTML :
<div class="emptybgl"></div>
<h2 class="temp"><?php print $block->subject; ?></h2>
<div class="emptybgr"></div>

CSS :
#content #sidebar-right .block div.emptybgl {
background: #FFFFFF url(images/dotbg.png) repeat-x scroll 0%;
width: auto;
height: 27px;
}
#content #sidebar-right .block div.emptybgr {
background: #FFFFFF url(images/dotbg.png) repeat-x scroll 0%;
width: auto;
height: 27px;
}
#content #sidebar-right .block h2.temp {
margin: 0 0 0 0px;
}

Please help. I'd really appreciate it. Thanks in advance.

Kirk

 

[brikis98]

depends how fancy you want to get with it, but the basic technique is to apply float: left to all 3 divs. Here are a couple of links to help:

link 1
link 2

 

[KayGee]

brikis98,

Thank you for the links. The problem I can't figure out how to solve is auto-adjusting the widths of divs 1 and 2 (which are empty) so that the background is only applied to the space left on either side of the h2 title and not to the h2 title itself (the width of the h2 title is not fixed). Is it even possible to do something like this with CSS?

Kirk

 

[brikis98]

CSS typically likes you to specify a width for your columns - some percentage or a fixed width. If you don't, they default to auto width, which just sizes the container to the width of its contents and does not stretch to fill its container. Since the widths of your columns depend on your h2 tag, and that width is not known beforehand, developing this layout with pure CSS will be tricky. The easiest way, IMO, is to use a table as follows:

<table style="width: 100%" border="1">
<tr>
<td style="width: 50%">Left column</td>
<td><nobr><h2>Header text in the middle</h2></nobr></td>
<td style="width: 50%">Right column</td>
</tr>
</table>

Comments:

* I set border=1 in the table so you can see what's happening, remove that when actually using it in the page
* The table is set to have 100% width, so it'll stretch across its entire container (ie, if a child of the body tag, it stretches across the whole page)
* Setting the left and right columns to width 50% tells each one to take up 50% of its container (the table). However, since there is a td between them, they just stretch as far as they can
* To prevent the text from wrapping in the central div, I put its contents in a nobr tag
* This works in FF, don't have IE on this computer, so make sure to test it out.

Now, depending what you're doing this coding for, people might yell at you for using tables to layout a page. While I agree tables are not an ideal layout mechanism, I have to say that CSS is often much much worse. It does some things well - the selector model is brilliant and text/background/border effects are great - but as far as laying out a page, it's utter crap. Unfortunately, it is the standard and you may be forced into using it. In that case, you could try to tweak this layout to make the columns stretch and the center relatively static. However, you can see that it is MUCH more code and quite a bit more complicated, so I personally prefer the table solution 🙂

 

[KayGee]

brikis98, I was actually trying to create block headers for a Drupal theme that look like this : http://i72.photobucket.com/alb...kayjaygee_13/block.png

It does appear that tables might be the easiest solution, but thank you for those links. I will play around with the code and see if I can get it to work. Would pure CSS work better (as in less code, compared to tables) if the h2 heading wasn't centered, like in the image I linked?

Thank you once again for your help. I really appreciate it.

Kirk

 

[brikis98]

i think the tricky part isn't centering the header but getting the left and right column to fill up all available space. something that occurs to me is that, as a lame compromise between css and tables, you could use display: table-cell:

<div style="width: 100%;">
<div style="display: table-cell; width: 50%;">Column1</div>
<div style="display: table-cell;"><nobr>Center lots of text blah</nobr></div>
<div style="display: table-cell; width: 50%;">Column2</div>
</div>

this is probably more CSS/XHTML/web 2.0 friendly... of course, if you're treating your divs like table cells anyway, maybe a table is the way to go 🙂



EDIT ---> scratch that, I don't think IE supports display: table-cell. my bad.

 

[KayGee]

Originally posted by: brikis98
i think the tricky part isn't centering the header but getting the left and right column to fill up all available space.

Bingo! 😀 That has been bugging me since I started and I have no idea how to do that with CSS. Keep in mind that they have to be empty too because the only text comes from the h2 heading and that determines how wide the left and right columns should be and accordingly repeat-x the background image.

 

[brikis98]

Originally posted by: KayGee

Originally posted by: brikis98
i think the tricky part isn't centering the header but getting the left and right column to fill up all available space.

Bingo! 😀 That has been bugging me since I started and I have no idea how to do that with CSS. Keep in mind that they have to be empty too because the only text comes from the h2 heading and that determines how wide the left and right columns should be and accordingly repeat-x the background image.

yeah, your choices for width in css are:

auto - sizes to the width of the contents
% - a percentage of the parent container
px/em - a fixed width

Note how there is no width: fill... Tables, however, do have the ability to fill all the space within the table and hence solve your issue. The closest I've found is this, but if you look closely, the center columns width is fixed in this layout. I set it to "auto" using firebug, but then the left and right column don't make proper contact with the middle one... not to mention that the amount and complexity of CSS to achieve this is ridiculous in comparison to the table approach.

 

[KayGee]

Yeah, that amount of CSS for something which appears to be relatively straightforward is insane. The tables option however works perfectly. I'll still play around with the code from the links you posted and see if I can come up with something.

Thank you for your help. I sincerely appreciate it.🙂

 

[KayGee]

Ok, I figured it out. To duplicate the result in the image I linked, you have to use nested divs. Here's the solution.

HTML :
<div class="emptybgl"><div class="emptybgl"><h2 class="temp"><?php print $block->subject; ?></h2></div></div>

CSS :
#content #sidebar-right .block div.emptybgl {
background: #FFFFFF url(images/dotbg.png) repeat-x scroll 0%;
height: 27px;
}
#content #sidebar-right .block div.emptybgr {
background: #FFFFFF url(images/dotbg.png) repeat-x scroll 0%;
height: 27px;
}
#content #sidebar-right .block h2.temp {
margin-left:30px;
padding-left:10px;
padding-right:10px;
display: inline;
background: #FFFFFF
}

Finally! brikis98, thanks again for all your help and patience. I really appreciate it. 🙂