1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

2 divs must fit 100% horizontaly - second one is empty

         

zomby888

12:13 am on Aug 3, 2011 (gmt 0)

10+ Year Member



Hello, I have two divs put into one wrapper div. 
<div id="wrapper">
 <div id="a">Title</div>
 <div id="b"></div>
</div>


In div b I have x-repeatable background. In div a I have Title which is different size on every page. I want to expand div b horizontally so it fits its parent (the wrapper) 100% but be inline with div a.
So the effect is whatever title I put into div a div b changes its size.

Any suggestions?

lucy24

1:11 am on Aug 3, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Seems to me the question is rather how to shrink everything, unless you've got colossally long titles. By default, a div or paragraph will take up all available horizontal space. Is there something in the CSS you haven't mentioned?

Oh, and for safety's sake stick something like &nbsp; into the second div. It isn't supposed to matter, but often it helps.

Paul_o_b

10:42 am on Aug 3, 2011 (gmt 0)

10+ Year Member



Hi,

There's a number of ways you could approach this depending on browser support.

The simplest would be to apply the repeating background image to the container itself and then just float the title text and give it a background colour to rub out the other background. There would be no need for the extra div then.

e.g. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.title {
line-height:1.3;
overflow:hidden;/* clear floats*/
margin:0 0 1em;
background:red;/* apply your repeating image here */
}
.title span {
background:white;/* rub out background image using page background colour*/
float:left;
padding:0 10px 0 0;
}
</style>
</head>
<body>
<h2 class="title"><span>Title goes here</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title"><span>Much longer Title goes here</span> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title"><span>Much longer Title goes here Much longer Title goes here Much longer Title goes here</span> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
</body>
</html>



However that doesn't cater for when the text may wrap to another line and indeed you may want your image patter to actually start correctly after the text and nt just be rubbed out indiscriminately.

So you could do something like this instead: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.title {
line-height:30px;
overflow:hidden;
position:relative;
margin:0 0 1em;
}
.title span {
background:red;/* apply your image here */
position:absolute;
width:999em;
height:30px;
bottom:0;
margin:0 0 0 5px;
}
</style>
</head>
<body>
<h2 class="title">Title goes here<span></span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title">Much longer Title goes here<span></span> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title">Much longer Title goes here Much longer Title goes here Much longer Title goes here<span></span> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
</body>
</html>


(No need to add &nbsp; in the above span as its height and width are controlled)

That will allow the text to wrap and the image to still start after the text.

If you only wanted IE8+ support we can strip the html down to just a single element. 


<h2 class="title">Title goes here </h2>


Then we use the pseudo element :after to provide the image. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.title {
 line-height:30px;
 overflow:hidden;
 position:relative;
margin:0 0 1em;
}
.title:after {
 background:red;/* apply your image here */
 content:" ";
 position:absolute;
 width:999em;
 height:30px;
bottom:0;
 margin:0 0 0 5px;
}
</style>
</head>
<body>
<h2 class="title">Title goes here </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title">Much longer Title goes here </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title">Much longer Title goes here Much longer Title goes here Much longer Title goes here </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>

</body>
</html>



There's probably half a dozen other ways to do this but does depend on the exact dynamics.

Here's a more expensive version just for interest sake but uses extra elements so I would not use this method. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h2.title {
width:100%;
overflow:hidden;
margin:0 0 1em;
line-height:30px;
}
h2.title span {float:left;margin:0 10px 0 0;}
h2.title b {
display:block;
overflow:hidden;
background:red;/* repeating image goes here */
}
</style>
</head>
<body>
<h2 class="title"><span>Title goes here</span><b>&nbsp;</b></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title"><span>Much longer Title goes here</span><b>&nbsp;</b></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
<h2 class="title"><span>Much longer Title goes here Much longer Title goes here</span><b>&nbsp;</b></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. </p>
</body>
</html>



Hope one of those was what you wanted.:)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026