I'm having trouble creating a division in the middle of two divs, My footer also isnt sticking to the bottom

Question

I'm learning css at the moment. I'm doing an assignment where I have to follow a set of instructions and add css rules as I go to make the page look a certain way and for me to understand the different rules. I followed the instructions exactly however my page looks alot different to the page in the assignment. the instructions are listed below.

Include the following two CSS rules between style tags in the head of your html document body { font-family: Calibri, sans-serif; background-color: #CAFEB8; } header { border: 1px solid black; margin: 1%; padding: 0 10px; background-color: #89FC63; }
1. Write a CSS rule for the ingredients section that a. creates a solid black border 1px width b. creates a margin of 1% on all four sides (top, right, bottom, left) c. creates a padding of 10px on all four sides d. sets the background colour of the section to a pale blue (hex code #B4D1B6) e. sets the width of the section to 45% f. sets the height of the section to 60% g. floats the section left
2. Write a CSS rule for the method section that a. creates a solid black border 1px width b. creates a margin of 1% on all four sides (top, right, bottom, left) c. creates a padding of 10px on all four sides d. sets the background colour of the section to a pale orange (hex code #FFFF99) e. sets the height of the section to 60% f. floats the section right
3. Write a CSS rule for the footer section that a. creates a solid black border 1px width b. creates a margin of 1% on all four sides (top, right, bottom, left) c. creates a padding of 10px on the left and right side, and 0 padding on top and bottom side d. sets the background colour of the section to a pale green (hex code # AAFD8E)

        body {
		font-family: Calibri, sans-serif;
		background-color: #CAFEB8;
		}
	    
		header {
		border: 1px solid black;
		background-color: #89FC63;
        margin: 1%;
	    padding: 0 10px
		}

	    #ingredients {
		border: 1px solid black;
		background-color: #B4D1B6;
		float:left;
		height: 60%;
		width: 40;
		float:left;
	    margin:1%;
		padding:10px;
		
		}
        
		#method {
		border: 1px solid black;
		background-color: #FFFF99;
		height: 60%;
		padding: 10px;
		float: right;
		margin: 1%;
		}
		
		footer
		{
		
		border: 1px solid black;
		margin: 1%;
		background-color:#AAFD8E 
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		padding-bottom: 0px;
		
		
			
		}

<body>

<header>
<h1>Curried Chicken in Coconut Milk</h1>
<p> Thai curries are quick  &amp; easy to prepare, especially now that most supermarkets 
sell authentic ready-made curry pastes flavoured with chilli, ginger, garlic, lemon grass &amp; spices.</p>
<p> Serves 4-6  </p>
</header>


<div id = "ingredients">
<h2> Ingredients: </h2>
<ul>
	<li> 1 tablespoon sunflower oil </li>
	<li> 4 skinless chicken breast fillets, sliced </li>
	<li> 1 large onion, finely chopped </li>
	<li> 2 garlic cloves, finely chopped  </li>
	<li> 1 tablespoon freshly grated root ginger </li>
	<li> 1 large red pepper, deseeded and chopped roughly </li>
	<li> 3 carrots, peeled and chopped roughly </li>
	<li> 2 tablespoons Thai red curry paste </li>
	<li> 1/2 pint <!-- insert span here --> (300 ml) chicken stock </li>
	<li> 14 oz (400g)  can coconut milk </li>
	<li> 2 tablespoons caster sugar </li>
	<li> good pinch salt </li>
	<li> juice of 1 lime </li>
	<li> chopped fresh coriander leaves, to garnish </li>
	<li> Thai fragrant or basmati rice, to serve </li>
</ul>
</div>

<div id = "method">
<h2> Method: </h2>
<ol>
	<li> Heat a wok until very hot. Add the oil and heat until it is almost smoking, swirling around the sides. 
	Tip in the chicken breast and cook for a few minutes, until lightly browned.</li>
	<li> Add the onion, garlic and ginger to the wok and cook for another 3-4 minutes, until softened. Add the red pepper and carrot.
	Stir in the curry paste and cook for 2 minutes, stirring continuously. Pour in the chicken stock and coconut milk and bring to 
	a gentle simmer. Stir in the sugar and salt.</li>
	<li> Add enough lime juice to taste and simmer gently for 10-15 minutes, until the sauce has slightly reduced and the chicken 
	is completely tender.</li>
	<li> To serve, divide among warmed wide-rimmed bowls &amp; sprinkle over the coriander, then serve with the Thai fragrant or basmati rice
	</li>
</ol>
</div>


<footer>
<p> <strong> The Wrens Kitchen </strong> </p>
</footer>


</body>

Why the footer isnt sticking to the bottom? and why cant I divide the two divs?

You can place the footer using clear: both; inside the footer a ; is missing. I modified your code and added a section. The text at CSS 2.2 on float might help to understand the rules. For floating the divs you might find two-divs-side-by-side-fluid-display to be helpful. — surfmuggle

surfmuggle surfmuggle · Accepted Answer · 2016-11-27T02:02:33

To address your questions

Why the footer isnt sticking to the bottom?
Why cant I divide the two divs?

Sample

See this sample based on your code.

Regarding Question 1 footer

This depends what you mean by sticking to the bottom. Since you change the floating of method and ingredients this floating rules applies for footer

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

To place footer below the floating boxes you have control flow next to floats using clear: both:

Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

Adding clear: both; takes care of floating:

footer{     
    background-color:#AAFD8E; /* a ; was missing */
    padding: 0px 10px 0px 10px;     
    clear: both; /* i added clear:both */
}

To set the footer to the bottom

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

Regarding Question 2 divide two divs

Regarding floated elements

If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

In your style rule for ingredients you wrote width:40 but it must be width:<length> and <length> is a <number> immediately followed by a unit identifier.

#ingredients {
    float:left;    
    width: 40ex; /* unit ex added */
}

#method {
    margin: 0 0 0 50ex; /* margin left 50ex added */
}

For floating the divs you might find two-divs-side-by-side-fluid-display to be helpful. The text at CSS 2.2 on float might help to understand the rules.

Additional info

To improve maintainability i would create a class .base that cover several style rules. Since the rule for the footer is similar i would add another rule:

 .base { border:1px solid black; margin: 1%; padding: 10px;}
 .basefooter { border:1px solid black; margin: 1%; padding: 0 10px}