How to make fluid?

HTML & CSS
1

I am trying to make the quotation marks image in the background expand with the content.

I cropped the main image into two new images but cannot figure out how to properly code it.

Below is what I currently have:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
	<div id="mainContent">
		<div class="left">
			<img src="_images/mainheader.gif" width="295" height="24" alt="Main Content Header" />

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nisl nec sapien porta pharetra quis ut risus. Curabitur ac eleifend lectus. In convallis hendrerit neque, sed pharetra enim pretium ut. Sed eros magna, vehicula vitae porta at, pulvinar ut nulla. Aenean nec lacus nunc. In hac habitasse platea dictumst. Aenean sit amet lorem et lacus vehicula laoreet sit amet eget est. Nam sit amet urna at neque cursus ultrices. Curabitur quam nisi, iaculis at molestie vel, mollis a libero.</p><br />
			<p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat. Maecenas accumsan, libero sed vulputate condimentum, ipsum quam adipiscing mauris, a ultrices ligula tortor ac metus. Integer hendrerit, enim semper rhoncus interdum, lectus risus feugiat nisi, congue lobortis lorem arcu id purus. Vestibulum molestie nunc mi, fringilla malesuada enim.</p>
		</div>
		<div class="right">
			<img src="_images/rightheader.gif" width="113" height="19" alt="Left Header" />
			<p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat.</p>
			<p class="paragraphSpacing" align="right">- Marie Jenkins, CEO Rapidshare</p>

			<p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat.</p>
			<p align="right">- John Hemmington, CEO Temp Inc</p>
		</div>
	</div>
</div>
</body>
</html>

CSS

#mainContent {
	background:#353535 url(_images/maindiv.gif) no-repeat 56&#37; 30px;
	border-bottom:1px #3c3c3c solid;
	color:#fff;
	display:inline;
	float:left;
	font:1.2em Tahoma, Geneva, sans-serif;
	line-height:1.8em;
	padding:46px 0 102px 0;
	text-align:justify;
	height:auto;
	width:100%
}
#mainContent img {
	padding-bottom:20px;
}
#mainContent .left {
	float:left;
	padding-left:46px;
    width:50%;
}
#mainContent .paragraphSpacing{
	padding-bottom:48px;
}
#mainContent .right {
	background:url(_images/quotes.gif) no-repeat left 36px;
	float:right;
	height:314px;
	padding-left:12px;
	padding-right:46px;
	width:38%;
}

http://www.jwebxpress.com/test/as/_images/quotes1.gif
http://www.jwebxpress.com/test/as/_images/quotes2.gif

2

Hi, can you give us a link to look at? Images make hte world of difference when debugging :slight_smile:

3

Working with the quote 1&2 images you linked to this is what I come up with.

The BG image in the #mainContent is what I guessed is your left quote1 image, if so remove the 56% left value and set it at 0.

The BG image for the .right div can be set as “bottom right”. You also need to remove the height from that right div.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AS</title>
<style type="text/css">
[B]#mainContent[/B] {
   [COLOR=Blue] background:#353535 url(quotes1.gif) no-repeat 0 30px;[/COLOR]
    border-bottom:1px #3c3c3c solid;
    color:#fff;
    [COLOR=Red]/*display:inline;*/[/COLOR]
    float:left;
    font:1.2em Tahoma, Geneva, sans-serif;
    line-height:1.8em;
    padding:46px 0 102px 0;
    text-align:justify;
    height:auto;
    width:100%
}
#mainContent img {
    padding-bottom:20px;
}
#mainContent .left {
    float:left;
    padding-left:46px;
    width:50%;
}
#mainContent .paragraphSpacing{
    padding-bottom:48px;
}
[B]#mainContent .right[/B] {
    [COLOR=Blue]background:url(quotes2.gif) no-repeat bottom right;[/COLOR]
    float:right;
    [COLOR=Red]/*height:314px;*/[/COLOR]
    padding-left:12px;
    padding-right:46px;
    width:38%;
}
[COLOR=DarkGreen]img{display:block;background:red}/*for testing without html images*/[/COLOR]

</style>

</head>
<body>
<div id="wrapper">
    <div id="mainContent">
        <div class="left">
            <img src="_images/mainheader.gif" width="295" height="24" alt="Main Content Header" />

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nisl nec sapien porta pharetra quis ut risus. Curabitur ac eleifend lectus. In convallis hendrerit neque, sed pharetra enim pretium ut. Sed eros magna, vehicula vitae porta at, pulvinar ut nulla. Aenean nec lacus nunc. In hac habitasse platea dictumst. Aenean sit amet lorem et lacus vehicula laoreet sit amet eget est. Nam sit amet urna at neque cursus ultrices. Curabitur quam nisi, iaculis at molestie vel, mollis a libero.</p><br />
            <p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat. Maecenas accumsan, libero sed vulputate condimentum, ipsum quam adipiscing mauris, a ultrices ligula tortor ac metus. Integer hendrerit, enim semper rhoncus interdum, lectus risus feugiat nisi, congue lobortis lorem arcu id purus. Vestibulum molestie nunc mi, fringilla malesuada enim.</p>
        </div>
        <div class="right">
            <img src="_images/rightheader.gif" width="113" height="19" alt="Left Header" />
            <p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat.</p>
            <p class="paragraphSpacing" align="right">- Marie Jenkins, CEO Rapidshare</p>

            <p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat.</p>
            <p align="right">- John Hemmington, CEO Temp Inc</p>
        </div>
    </div>
</div>
</body>
</html>
4

Thanks Rayzur! Works perfectly.

5

I’m having a new problem that I need help with. I originally had a dividing bar

background:#353535 url(_images/maindiv.gif) no-repeat 56% 30px;

between the left and right content divs and now I do not know how to get that to show properly.

Where quotes1.gif is now is where the maindiv.gif was originally. Any ideas?

6

Hi,
You will need to post a link to your maindiv.gif image so we can have it to work with.

There are probably a couple of different ways to do this but I would like to have that image so I can see where it was at with that 56% bg position.

Where quotes1.gif is now is where the maindiv.gif was originally. Any ideas?

Yes we might could AP it to the top left and layer it under your main div.

Please post the maindiv.gif image :slight_smile:

7

Hi,
I have reworked your left and right floated divs by removing that 46px lt & rt padding that was on them. It was really causing conflict with those percentage widths and caused the right column to drop when sized down enough.

I took those 46px paddings and put them on your #maincontent div. By doing that I had to remove the 100% width and float. After removing that float I had to contain the floated columns with a pseudo:after block and haslayout for IE6/7.

Now we can set the top left quote as an absolute positioned div as top:0 and left:0 according to the #maincontent div. Then we can float the bottom right quote and lift it up with a negative margin. That way it will always follow the right column’s height.

Now you got your #maincontent div background freed up for your divider image. You will have to reposition it since I changed the column widths around a little after I removed their 46px side paddings.

Oh yeah, I got rid of those align right text tags in your html and set up a new class fort that. And an HTML 4.01 strict.dtd to seal the deal.

This will keep your lt & rt columns layered above the quote idivs

.left,.right{position:relative;z-index:1;}

I don’t know what that #wrapper div was doing but I am guessing you had other plans with it. If not you can loose it.

Give this a try and see how it goes :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AS</title>
<style type="text/css">

#main {
    position:relative;
    min-height:0;/*IE7 haslayout/float containment*/
    padding:46px 46px 102px 46px;
    background:#353535 url(maindiv.gif) no-repeat 56% 30px;
    border-bottom:1px #3c3c3c solid;
    font:1.2em Tahoma, Geneva, sans-serif;
    line-height:1.8em;
    text-align:justify;
    color:#fff;
}
* html #main {height:1%;}/*IE6 haslayout/float containment*/

#main:after { /*float containment for good browsers*/
    clear:both;
    content:"";
    display:block;
    height:0;
    font-size:0;
}

#main img {padding-bottom:20px;}

.left {
    float:left;
    width:54%;
}
.right {
    float:right;
    width:41%;
}
.left,.right{position:relative;z-index:1;}

/*==== Quote BG img divs ====*/
#lt-qt,#rt-qt{
    width:76px;
    height:278px;
}
#lt-qt{
    position:absolute;
    top:0;left:0;
    background:#353535 url(quotes1.gif) no-repeat;
}
#rt-qt{
    float:right;
    background:#353535 url(quotes2.gif) no-repeat;
    margin-top:-278px;
    right:-46px;
    position:relative;
}
p.ta-rt{
    text-align:right;
    padding-bottom:48px;
}
img{display:block;background:red}/*for testing without html images*/

</style>

</head>
<body>
<div id="wrapper">
    
    <div id="main">
        <div class="left">
            <img src="_images/mainheader.gif" width="295" height="24" alt="Main Content Header" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nisl nec sapien porta pharetra quis ut risus. Curabitur ac eleifend lectus. In convallis hendrerit neque, sed pharetra enim pretium ut. Sed eros magna, vehicula vitae porta at, pulvinar ut nulla. Aenean nec lacus nunc. In hac habitasse platea dictumst. Aenean sit amet lorem et lacus vehicula laoreet sit amet eget est. Nam sit amet urna at neque cursus ultrices. Curabitur quam nisi, iaculis at molestie vel, mollis a libero.</p><br />
            <p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat. Maecenas accumsan, libero sed vulputate condimentum, ipsum quam adipiscing mauris, a ultrices ligula tortor ac metus. Integer hendrerit, enim semper rhoncus interdum, lectus risus feugiat nisi, congue lobortis lorem arcu id purus. Vestibulum molestie nunc mi, fringilla malesuada enim.</p>
        </div>
        <div class="right">
            <img src="_images/rightheader.gif" width="113" height="19" alt="Left Header" />
            <p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat.</p>
            <p class="ta-rt">- Marie Jenkins, CEO Rapidshare</p>
            <p>Nulla vel augue magna. Nullam gravida odio ut nunc condimentum pharetra. Aliquam condimentum mattis mauris, ut posuere ipsum pulvinar nec. Sed cursus ornare diam vitae pretium. Maecenas in lacinia velit. Curabitur iaculis turpis sit amet eros ultrices consequat.</p>
            <p class="ta-rt">- John Hemmington, CEO Temp Inc</p>
        </div>
        <div id="lt-qt"></div>
        <div id="rt-qt"></div>
    </div>

</div>
</body>
</html>
8
Off Topic:

Snazzy new site, Ray. I’ve bookmarked it for future use. Your site and Eric’s [URL=“http://www.visibilityinherit.com/”]visibility: inherit make for a great foundation of resource materials.