homepage Welcome to WebmasterWorld Guest from 54.161.191.254
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




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

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




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

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




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

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.:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved