Jump to content

[Solved] outer div not stretching with inner div's content


damiancds
 Share

Recommended Posts

Okay, Ive got two divs (floating aside one another) inside the outer divmy outer div has a background color (white) and border (black) and the page is displayed with a black bar above the two floated elementsI thought that the outer divs always stretched to allow room for the inner div(s), which is not the case herehtml:

<div class="recipe_card_container">	<div class="recipe_card_ingredients">		<b>Ingredients:</b>		<table>			<tr> <td class="recipe_measurement">1</td> <td class="recipe_item">Small cauliflower (about 1<sup>1</sup>⁄<sub>4</sub> lbs.)</td> </tr>			<tr> <td class="recipe_measurement"> </td> <td class="recipe_item">Salted water</td> </tr>			<tr> <td class="recipe_measurement">1</td> <td class="recipe_item">Medium onion, finely chopped</td> </tr>			<tr> <td class="recipe_measurement">2 Tbsp.</td> <td class="recipe_item">butter or margerine</td> </tr>			<tr> <td class="recipe_measurement">1</td> <td class="recipe_item">Egg</td> </tr>			<tr> <td class="recipe_measurement"><sup>1 </sup>⁄<sub>4</sub> ???</td> <td class="recipe_item">Ketchup or chili sauce</td> </tr>			<tr> <td class="recipe_measurement"><sup>1 </sup>⁄<sub>3</sub> cup</td> <td class="recipe_item">soft bread crumbs</td> </tr>			<tr> <td class="recipe_measurement"><sup>1 </sup>⁄<sub>2</sub> tsp.</td> <td class="recipe_item">garlic salt</td> </tr>			<tr> <td class="recipe_measurement"> </td> <td class="recipe_item">Dash of pepper</td> </tr>			<tr> <td class="recipe_measurement">1 lb.</td> <td class="recipe_item">Lean ground beef</td> </tr>		</table>		</div>	<div class="recipe_card_prep">		<b>Preparation:</b>		<ol>			<li><span> Rinse cauliflower. Remove and discard leaves and lower part of the core. Place, stem end down, in 1<sup>in</sup> of boiling salted water in a deep pan. </span></li>			<li><span> Cover and steam for five minutes then drain. Place in greased, deep 1<sup>1</sup>⁄<sub>4</sub> to 1<sup>1</sup>⁄<sub>2</sub> quart baking dish. </span></li>			<li><span> Cook onion in heated butter until lightly browned. Remove from heat. </span></li>			<li><span> Beat egg in a medium bowl. Mix in catsup (or chili sauce), bread crumbs, garlic salt, and pepper. Then lightly mix in onion mixture and ground beef. </span></li>			<li><span> Mold ground beef mixture evenly around the sides and top of the cauliflower. </span></li>			<li><span> Bake, uncovered, at 350° for 45 to 50 minutes or until meat is well browned and cauliflower is tender when a knife is inserted to test it. </span></li>			<li><span> Let stand for 5 minutes, then cut in wedges to serve </span></li>		</ol>	</div>	</div>

css:

div.recipe_card_container{background-color: white;border: 1px solid black;clear: both;}div.recipe_card_ingredients{background-color: white;margin: auto;padding: 2px;width: 355px;float: left;text-align: left;}div.recipe_card_prep{margin: auto;padding: 2px;text-align: left;width: 355px;float: right;background-color: white;}

you can see it in action here

Edited by damiancds
Link to comment
Share on other sites

that solved it nicely, thanks jkloth. Now i just have to mess with margin's and padding's to make it uncrowded.again, thanks,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...