All geek questions in one place

I'm having trouble creating a separation in the middle of two divs, my footer also doesn't stick to the bottom

I am studying css at the moment. I am doing a job where I need to follow a set of instructions and add CSS rules when I go to make the page look a certain way, and for me to understand the different rules. I followed the instructions, but my page is very different from the page in the assignment. Instructions are given below.

  1. Include the following two CSS rules between style tags in the header 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, which is a. creates a solid black border with a width of 1px b. creates a 1% border on all four sides (top, right, bottom, left) c. creates a 10px gasket on all four sides; e. sets the section background color to pale blue (hexadecimal code # B4D1B6); e sets the section width to 45%; e sets the section height to 60%; floats left to left

    2. Write a CSS rule for the method section, which is a. creates a solid black border with a width of 1px b. creates a 1% border on all four sides (top, right, bottom, left) c. creates a 10px gasket on all four sides; e. sets the section background color to pale orange (hex code # FFFF99); e sets the section height to 60%; the section to the right floats

    3. Write a CSS rule for the footer section, which is a. creates a solid black border with a width of 1px b. creates a 1% border on all four sides (top, right, bottom, left) c. creates a 10px registration on the left and right sides, and 0 - on the upper and lower sides. sets the background color of the section to pale green (hexadecimal 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>
Run code

The page should look like this: This is what I have

Why doesn't the footer stick to the bottom? and why can't I split the two divs?

+4
source share
2 answers

To answer your questions

  • Why doesn't the footer stick to the base?
  • Why can't I split two divs?

Example

See this example based on your code .

1

, , . method ingredients footer

float , - , .

footer , , clear: both:

, , .

clear: both; :

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


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

2, divs

, , , .

ingredients width:40, width:<length> <length> <number>, .

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

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

divs -divs-side-by-side-fluid-display, . CSS 2.2 float .

, .base, . , :

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

CSS , : a. 1px b. 1% (, righ...

, ?

<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>


<section 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>
</section>

<section 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>
</section>


<section id="footer">
  <p> <strong> The Wrens Kitchen </strong> </p>
</section>



 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;
   height: 60%;
   width: 45%;
   float: left;
   margin: 1%;
   padding: 10px;
 }

 #method {
   border: 1px solid black;
   background-color: #FFFF99;
   height: 70%;
   padding: 10px;
   margin: 1%;
   width: 45%;
   float: right;
 }

 #footer {
   border: 1px solid black;
   margin: 1%;
   background-color: #AAFD8E padding-left: 10px;
   padding: 0 10px 0 0;
   clear: left;
 }

. https://jsfiddle.net/Thielicious/9mdfftba/

+1

Source: https://habr.com/ru/post/1662043/

More articles:


All Articles