I'm trying to figure out how to format the code below so that the first two blocks of info display side by side, then display the third one centered underneath it. I tried using a listing style with css to format it so but doesn't seem to really work for me.
Help/Suggestions?
<div class="inauguration-content">
<h3>Inauguration</h3>
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center</p>
<h3>Inaugural Gala</h3>
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation</p>
<h3>Important Information for Delegates</h3>
Direction to HCCC<br />
Campus Map<br />
Lodging Information<br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.</p>
</div>
You can create three div's.
The first div (top-left) would have a width set at, say, 50% of the container (e.g. viewport) and float left.
The second div (top-right) would have a width set at, say, 50% of the container (e.g. viewport) and float right.
The third div (bottom-center) would have a witdh set at, say, 100% of the container (e.g. viewport) use the CSS 'clear:both' to position itself immediately below the tallest of the two floats. To center, use a smaller width (e.g. 50% or 20em) and set the CSS margin-left and margin-right to auto (see example below.)
The above will dynamically pack the three divs to accommodate any wrapping and vertical growing (including because of the increase of font size by the user for accessibility purposes) inside any of the three div's.
<html><body>
<div style="width:50%; float:left">
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center
</div>
<div style="width:50%; float:right">
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation
</div>
<div style="width:50%; margin-left:auto; margin-right:auto; clear:both">
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.
</div>
</body></html>
Just for fun, here is the layout you wanted using lists.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>container Title</title>
<style type="text/css" media="screen">
body {
font-family:Georgia;
}
#container {
width:700px;
margin:0 auto;
}
ul {
display:block;
margin:0;
padding:0px;
width:50%;
float:left;
}
ul.full {
margin:0 auto;
float:none;
clear:both;
padding-top:5px;
}
ul li {
list-style-type:none;
margin:0;
padding:0;
padding-left:10px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><h4>Inauguration</h4></li>
<li>Friday, April 17, 2009</li>
<li>3:00 p.m.</li>
<li>Sarkus-Busch Theater</li>
<li>Robert McLaughlin College Center</li
></ul>
<ul>
<li><h4>Inaugural Gala</h4></li>
<li>7-11 p.m.</li>
<li>Robert McLaughlin College Center</li>
<li>Featuring hors d'oeuvres, open bar and dinner and dessert stations</li>
<li>Entertainment by Frankie Michaels</li>
<li>Cocktail Attire Recommended</li>
<li>Tickets are $100 per person</li>
<li>Proceeds benefit the Herkimer County College Foundation</li>
</ul>
<ul class="full">
<li><h4>Important Information for Delegates</h4></li>
<li>Direction to HCCC</li>
<li>Campus Map</li>
<li>Lodging Information</li>
<li>Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.</li>
<li>Delegates are expected to furnish their own academic regalia. </li>
</ul>
</div>
</body>
</html>
I wouldn't style this with a list, just use divs.
<style type="text/css">
.left { float:left; }
.right { float:right; }
.half { width:50%; }
.centered { text-align:center; }
// from http://www.webtoolkit.info/css-clearfix.html
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
<div class="clearfix">
<div style="left half">
<strong>Inauguration</strong><br />
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center<br />
</div>
<div style="right half">
<strong>Inaugural Gala</strong><br />
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation<br />
</div>
</div>
<div class="centered">
<strong>Important Information for Delegates</strong><br />
Direction to HCCC<br />
Campus Map<br />
Lodging Information<br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.<br />
</div>
<div style="width:49%; float:left"><p>
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center</p>
</div>
<div style="width:49%; float:left"><p>
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation</p>
</div>
<div style="width:50%;margin:auto "><p>
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should
report to the Open Student Area, first floor of the
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.</p>
</div>
Related
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
I've just registered here and I am looking for a little help.
I'm working on my tribute page for free code camp and the bullet points I have are not remaining central when resizing the fluid container.
Does anyone have any ideas?
Here is a link to my code pen so you can take a look code pen
body {
margin: 60px 60px 60px 60px;
font-size: 100%;
}
h1 {
font-family: lobster, Monospace;
text-align: center;
font-size: 5em; /* 80px/16=5em */
text-decoration: underline;
margin-bottom: 60px;
border-style: ;
}
blockquote {
font-size: 20px;
font-family: 'Puritan', cursive;
color: black;
}
.img-r {
/* other definitions */
width:100%;
}
.padding {
padding-top: 20px;
}
li {
font-family: Monospace;
text-align: center;
font-size: 2em; /* 80px/16=5em */
text-decoration: ;
margin-bottom: 60px;
border-style: ;
}
#media (max-width: 700px){
.jumbotron p {
font-size: 5px;
}
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<h1>
Dame Stephanie "Steve" Shirley
</h1>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9 col-md-6">
<h2 style="color: #645340; text-decoration: underline;" class="text-center">About
Dame Stephanie "Steve" Shirley </h2>
<ul class="text-center">
<li class="text-center"><em>Dame Stephanie "Steve" Shirley was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em>
</li>
<li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em>
</li>
<li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em>
</li>
<li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em>
</li>
<li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em>
</li>
<li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em>
</li>
<li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em>
</li>
</div>
<div class="col-xs-3 col-md-6">
<div class="thumbnail">
<img class="img-responsive img-r center-block" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg">
<div>
<p class="text-center padding">
Dame Stephanie "Steve" Shirley
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Much appreciated,
R
The list is not aligned with the title because the list has a left-padding, as it should, so that the bullets are visible and there's spacing between them and the text. You could either remove the 40 pixels of left padding on the ul.text-center element or add 40 pixels of left-padding to the title.
So I want it to float to the right, but I want the text and one image (which I haven't turned to links yet) to be in one line.
HTML code:
<html>
<title>Home - Welcome to Micro Skills!</title>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
<div id="header" class="header">
<div class="container">
<div class="logo">
<h1><img src="microskills_logo.jpg" width="275" height="106" alt="Logo - Micro Sills"></h1>
</div>
<div class="navBar">
<ul>
<b>
<li><img src="home_icon.jpg" width="256" height="256" alt="Home" class="home_icon"></li>
<li>About Us</li>
<li>Events</li>
<li>Get Involved</li>
<li>Contact Us</li>
</b>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Welcome to the Community MicroSkills Development Centre website.
Since 1984, we have been serving communities in the Greater Toronto Area. As a non-profit, charitable organization, we strive to achieve excellence in our service delivery to women, newcomers to Canada, youth and other community members who trust us to support them in improving their economic and social well-being.
Community MicroSkills Development Centre is a multi-cultural, non-profit, community based organization committed to assisting the unemployed, with priority to women, racial minorities, youth and immigrants. Recognizing barriers that immigrants, racial minority, youth and women face in their efforts towards self-sufficiency, MicroSkills aims to enable them to participate more fully in Canadian society and assist them in acquiring the skills needed to achieve self-determination and economic, social and political equality.
Our programs are designed to assist the unemployed, with priority to women, racial minorities, youth and immigrants achieve career and personal goals. Clients can choose as many services as required to help them on their way to becoming self-reliant and economically self-sufficient.</p>
</div>
</div>
</html>
CSS code:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
margin:auto;
}
.container{
width:85%;
margin:auto;
}
.header{
background-color:#900;
width:100%;
height:17%;
top:0;
position:fixed;
text-decoration:none;
}
.logo{
float:left;
}
.navBar{
float:right;
height: 10px;
}
li{
float:left;
margin-left:2%;
padding-top:20px;
color:#FFF;
text-transform:uppercase;
font-size:12px;
font-stretch:ultra-condensed;
padding-right:0;
}
.content{
padding-top:20%;
}
.home_icon{
height:50px;
width:50px;
}
I want the same positioning, but I want to move the text and image in the "navBar" slightly to the left to fit everything in one line.
You should add a width property to your .navBar CSS.
http://codepen.io/calebanth/pen/KrZBXo
.navBar {
float: right;
height: 10px;
width: 30%;
}
I can not get the tables to center in the browser. Please look at my code and let me know what needs to be changed. thanks so much. I have looked over all the internal style sheets as well as the inline that I have placed on the table tags. I have another webpage that is coded the same and is similar and I can't see any differences, it is also not centering.
<!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" lang="en">
<head>
<title>Pie Crust Recipe | Pies by Grandma Reeves</title>
<meta name="author" content="Jaeden Kimball Harris"/>
<meta name="keywords" content="'Applie pie',Filling, Delicious,'Grandma Reeves', Recipe"/>
<meta name="description" content="Come enjoy a hot applie pie, perfect for the fall season or any season really. Straight out of Grandma Reeves kitchen!"/>
<style type="text/css" media="all">
body{
background-color: #FEFACB;
background-image: url("images/lemonbackground.jpg");
text-align:center;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
text-align:center;
}
h2 {
font: 'Comic Sans', times, serif;
color: #FDC62D;
font-size:20px;
}
table{
background-color:#ffffff;
text-align:center;
width:850px;
height:800px;
}
td{
vertical-align:top; padding:15px;
}
table.center (
margin-left:auto;
margin-right:auto;
)
ul {
list-style-type:square
}
</style>
</head>
<body>
<table class="center">
<tr>
<td>
<table class="center" style="width:85%;" />
<tr>
<td>
<img src="images/filling_smnav.gif" width="154" height="143" alt="Click here for the lemon meringue pie and filling recipes"></img>
</td>
<td>
<img src="images/crust_smnav.gif" width="154" height="143" alt="Click here for the flaky crust recipe"></img>
</td>
<td>
<img src="images/sm_logo.gif" width="312" height="183" alt="Lemon Meringue Pie recipe from Grandma Reeves"></img>
</td>
</tr>
<tr>
<td colspan="3">
<p style="text-alight:center;"><img src="images/yellowbar.gif" width="636" height="8" alt="red bar"></img></p>
<h1> Pie Crust Recipe </h1>
<h2> Ingredients</h2>
<ul>
<li>2 Cups flour</li>
<li>1 Cup Butter Flavor Crisco brand shortening</li>
<li>1 tsp salt</li>
<li>1 tsp sugar</li>
<li>1/4 tsp baking powder</li>
<li>1/3 Cup milk</li>
</ul>
<blockquote>
<p> Stir until lumps are dissolved (can use a hand mixer) </p>
</blockquote>
<h2>Bring to a Boil</h2>
<ul>
<li>4 cups water</li>
<li>2 cups sugar</li>
</ul>
<h2> Directions </h2>
<p> Add all dry ingredients together.</p>
<p>Use two knives and criss cross them to cut the Butter Flavor Crisco® into the flour mixture. Cut it into the flour until the mixture is tiny crumbs.</p>
<p>Sprinkle milk over top of the mixture and gently fold the milk into the mixture, not handling it.</p>
<p>Spread some flour on the counter and place 1/2 of the mixture on the flour. Lightly flour the rolling pin. Roll out thin. The secret avoid handling and try to only roll it out once.</p>
<p>Carefully place the dough in the pie pan (folding it in 1/2 first sometimes helps)</p>
<p>Flute the edges (pinching the edges with your thumb and index finger).</p>
<p>Bake 400° for 10-12 minutes (until lightly brown)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add this to your table css:
table
{
margin: 0 auto;
}
fiddle, if need be: http://jsfiddle.net/vvov1y8q/
The correct answer is to not set the margin to 0 if you want to display the table in middle of the browser.
Specifically, try the following this code:
<!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" lang="en">
<head>
<title>Pie Crust Recipe | Pies by Grandma Reeves</title>
<meta name="author" content="Jaeden Kimball Harris"/>
<meta name="keywords" content="'Applie pie',Filling, Delicious,'Grandma Reeves', Recipe"/>
<meta name="description" content="Come enjoy a hot applie pie, perfect for the fall season or any season really. Straight out of Grandma Reeves kitchen!"/>
<style type="text/css" media="all">
body{
background-color: #FEFACB;
background-image: url("images/lemonbackground.jpg");
text-align:center;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
text-align:center;
}
h2 {
font: 'Comic Sans', times, serif;
color: #FDC62D;
font-size:20px;
}
table{
background-color:#ffffff;
text-align:center;
width:100%;
height:800px;
}
td{
vertical-align:top; padding:15px;
}
table.center (
margin-left:auto;
margin-right:auto;
)
ul {
list-style-type:square
}
</style>
</head>
<body>
<table class="center">
<tr>
<td colspan="2">
<table class="center" style="width:50%;margin:0 auto" />
<tr>
<td>
<img src="images/filling_smnav.gif" width="154" height="143" alt="Click here for the lemon meringue pie and filling recipes"> </img>
</td>
<td>
<img src="images/crust_smnav.gif" width="154" height="143" alt="Click here for the flaky crust recipe"></img>
</td>
<td>
<img src="images/sm_logo.gif" width="312" height="183" alt="Lemon Meringue Pie recipe from Grandma Reeves"></img>
</td>
</tr>
<tr>
<td colspan="3">
<p style="text-alight:center;"><img src="images/yellowbar.gif" width="636" height="8" alt="red bar"></img></p>
<h1> Pie Crust Recipe </h1>
<h2> Ingredients</h2>
<ul>
<li>2 Cups flour</li>
<li>1 Cup Butter Flavor Crisco brand shortening</li>
<li>1 tsp salt</li>
<li>1 tsp sugar</li>
<li>1/4 tsp baking powder</li>
<li>1/3 Cup milk</li>
</ul>
<blockquote>
<p> Stir until lumps are dissolved (can use a hand mixer) </p>
</blockquote>
<h2>Bring to a Boil</h2>
<ul>
<li>4 cups water</li>
<li>2 cups sugar</li>
</ul>
<h2> Directions </h2>
<p> Add all dry ingredients together.</p>
<p>Use two knives and criss cross them to cut the Butter Flavor Crisco® into the flour mixture. Cut it into the flour until the mixture is tiny crumbs.</p>
<p>Sprinkle milk over top of the mixture and gently fold the milk into the mixture, not handling it.</p>
<p>Spread some flour on the counter and place 1/2 of the mixture on the flour. Lightly flour the rolling pin. Roll out thin. The secret avoid handling and try to only roll it out once.</p>
<p>Carefully place the dough in the pie pan (folding it in 1/2 first sometimes helps)</p>
<p>Flute the edges (pinching the edges with your thumb and index finger). </p>
<p>Bake 400° for 10-12 minutes (until lightly brown)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I hope this works for you.
I am having a bit of a problem with one of my containers. It is not expanding with my content. Here is the code:
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2>
Special Disney Ticket Offer!
</h2>
<p class="specCont">
<img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
</p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight">
<a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
<img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
</a>
</div>
<div class="clear"></div>
<!--center right end-->
</div>
<!--center section end-->
CSS:
#centerContent {
width: 980px;
height: 100%;
background-image:url(../images/main-special-bg-strip.png);
background-repeat:repeat-y;
}
#centerLeft {
width: 572px;
height: 100%;
float:left;
}
#centerRight {
width: 408px;
height: 100%;
float:right;
}
What I am looking to do is have the centerContent div stretch with the two divs inside. I have a background strip on the centerContent that will allow the white background to expand 100%.
I hope that made some sort of sense and thank you in advance for any and all help.
Add overflow:auto; to #centerContent.
Since the child divs are floated, the parent collapses and acts like it has no content. Adding overflow:auto; restores the expected behavior.