0

I had a question regarding CSS and I was truly hoping some of the bright minds could help me out :)

So I have a div with some divs inside of it, as the main div is the content 'background' and the other divs are the top, sides, bottom and the content itself.. I need for the side ones to expand when there is more text than before entered.

I did this before with a white background and it worked like a charm, but the background is a pattern this time and I would like the pattern to stay as a whole all the time. So I want it to have a minimum height (min-height: 22px I've tried) and when theres more space needed, then it should become 44, and then 66,88, and so on..

I really hope I am clear enough and that someone can help me because I'd like some enlightment.

The code:

<div id="main">
<div id="main-top"></div><!-- end of main-top-->
<div id="main-holder">
<div id="main-content">
Jejjajdijdiajsdijasidjasijdiasjd<br><br><br>hehehe

</div><!-- end of main-content-->
</div><!-- end of main-holder-->
<div id="main-bottom"></div><!-- end of main-bottom-->
</div><!-- end of main -->
--

The CSS related to the HTML above:

>--
#main{
width: 999px;
padding: 0;
margin: 0 auto;
}

#main-top{
height: 22px;
width: 999px;
background: url(../images/main-top.png) no-repeat;
}

#main-holder{
background: url(../images/main-holder.png) repeat-y;
width:999px;
height: auto;
min-height:22px;
}

#main-content{
background: none;
width:auto;
margin:0 10px;
padding: 0 10px 0 10px;
overflow:hidden;
}

#main-bottom{
height:22px;
width:999px;
background: url(../images/main-bottom.png) no-repeat;
}

--

Hopefully I was clear enough, thanks in advance!

Marciano Planqué
  • 5
  • 2
  • The containers will expand with the content, period - there's no regulating what increment it expands in without using some JavaScript. Won't the background just tile regardless of the size of the container? You could position it, if you're trying to get it to align to the top or bottom. – Surreal Dreams Mar 22 '12 at 00:39

2 Answers2

0

Use Javascript to measure how much height you need. Then round this amound of pixels to some value that can be divided by 22. Set this value as height of your div.

Frank van Wijk
  • 3,234
  • 20
  • 41
  • I've used line-height for now, thanks for all your responses.. I would have no clue how to fix this with Javascript though, I'd love to.. – Marciano Planqué Mar 22 '12 at 11:26
0

To do this without javascript can be done, but requires you to make some concessions and be careful about your content. Change the width of this fiddle and see how it changes height. It uses a line-height: 22px to keep text adding in such increments. This does not guarantee that a user has settings that might override that, but it should keep it as you desire if not.

Of course, you must be okay with the text having such a line height, and you must be careful to have other things (floated images, padding, etc.) keep to your sizing.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • As Scott warns, this will not degrade gracefully and would likely be unusable for low vision users that run extra large fonts. – steveax Mar 22 '12 at 01:25
  • It is not that it degrades badly. We are still dealing with a background image, so the fact that you would "like the pattern to stay as a whole all the time" is far different than "_need_ the pattern to be whole all the time." If you can live with the thought that certain special users will not have that experience, then my solution should work fine. – ScottS Mar 22 '12 at 02:37
  • it's the text that will break down at extra large sizes. By specifying it in px, it will make fonts larger than that overlap and be unreadable. – steveax Mar 22 '12 at 04:15
  • @MarcianoPlanque--[here is an example of what steveax warns about](http://jsfiddle.net/wEct5/13/). For those few users that it will be an issue with, you would need to [use some javascript to detect `line-height`](http://stackoverflow.com/questions/739940/detect-browser-font-size) and then set your `line-hieght` to some multiple of `22px` to avoid the issue. – ScottS Mar 22 '12 at 21:32
  • I wish I knew javascript in that case.. Can someone help me out further with that? What would the lines be that I'd have to put in – Marciano Planqué Mar 24 '12 at 15:01