-2

I am new to the html and css and i am trying to learn a few things. I am following a tutorial from Linda and i am stack. I did it again and again and it seems like the bug persists.

The paragraph or < p > contains some words. that the footer overlays. If if do not modify the margin of the footer, the footer will start after the navigation bar(now with the margin it starts 5% further). What i would like to do is to make the footer start after the paragraph.

Please give a helping hand. Thanks in advance. HOW IT LOOKS HTML CODE:

@charset "utf-8";
h1 {
 font-size: 2em;
 font-family: league-gothic;
 font-style: normal;
 font-weight: 400;
}
h2 {
 font-family: bitter;
 font-style: normal;
 font-weight: 400;
 font-size: 1.2em;
}
nav {
 background-color: #222325;
 color: #FFFFFF;
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}
footer {
 text-align: center;
 color: #FFFFFF;
 background-color: #222325;
 font-size: x-small;
 margin-top: 5%;
 margin-right: 5%;
 margin-bottom: 5%;
 margin-left: 5%;
 padding-top: 5px;
 padding-bottom: 5px;
}




body {
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 200;
}
.assideLeft {
 width: 30%;
 margin-left: 5%;
 margin-right: 2.5%;
 float: left;
}
.sectionRight {
 width: 50%;
 margin-left: 2.5%;
 margin-right: 5%;
 float: right;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default;league-gothic:n4:default;bitter:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>LADY M 
  <nav>Home About Fashion Contact </nav>
</header>
<aside class="assideLeft">
   <h1>Where fashion meets everyday standards.</h1>
</aside>

<section class="sectionRight">
 <h2>Woman News</h2>
<p>I am an economics student that is interested in fashion, mode, trending styles and woman's life style. I have a successful account at Polyvore, where I communicate with other people, check new trend, have fun and doing my part to make the world a more beautiful place.</p>
</section>

<footer>Copyright Alexandros Tsoskounoglou.</footer> 
</body>

</html>
Alexandros Tsos
  • 9
  • 2
  • Well, you're using the elements wrong (`

    ` in an `

     – junkfoodjunkie Jan 06 '17 at 02:26
  • Welcome to Stack Overflow. Can you define, precisely and concisely, what problem in the display you need help fixing? (“All of it” is not an OK answer.) – Tim Grant Jan 06 '17 at 02:29
  • i would like the footer to NOT overlap the text under the woman's news. I would like the footer to start where the text or

    ends. Thank you for your quick response.

     – Alexandros Tsos Jan 06 '17 at 02:31

3 Answers3

1

Use 

clear:both;

on your footer. Here is full documentation https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Kornelia Kobiela
  • 467
  • 3
  • 15
  • It seems like if fixes the problem. But a) I have no idea why.(please explain) b) the tutorial does not mention clear: both. What does clear both does. // The page in the tutorial was built with live / split edit in Dreamweaver. No code editing. Inserting elements and selectors was the main tools. Again thank you for your time – Alexandros Tsos Jan 06 '17 at 02:52
  • An float property not only align element to the left or right but make it floating above other elements like a layer. Clear: both property remove floating from the next elements. – Kornelia Kobiela Jan 06 '17 at 02:59
0

Is this what youre looking for? Try removing 

margin-left: 2.5%;
margin-right: 5%;
float: right;

under .sectionRight

@charset "utf-8";
h1 {
 font-size: 2em;
 font-family: league-gothic;
 font-style: normal;
 font-weight: 400;
}
h2 {
 font-family: bitter;
 font-style: normal;
 font-weight: 400;
 font-size: 1.2em;
}
nav {
 background-color: #222325;
 color: #FFFFFF;
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}
footer {
 text-align: center;
 color: #FFFFFF;
 background-color: #222325;
 font-size: x-small;
 margin-top: 5%;
 margin-right: 5%;
 margin-bottom: 5%;
 margin-left: 5%;
 padding-top: 5px;
 padding-bottom: 5px;
}




body {
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 200;
}
.assideLeft {
 width: 30%;
 margin-left: 5%;
 margin-right: 2.5%;
 float: left;
}
.sectionRight {
 width: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default;league-gothic:n4:default;bitter:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>LADY M 
  <nav>Home About Fashion Contact </nav>
</header>
<aside class="assideLeft">
   <h1>Where fashion meets everyday standards.</h1>
</aside>

<section class="sectionRight">
 <h2>Woman News</h2>
<p>I am an economics student that is interested in fashion, mode, trending styles and woman's life style. I have a successful account at Polyvore, where I communicate with other people, check new trend, have fun and doing my part to make the world a more beautiful place.</p>
</section>

<footer>Copyright Alexandros Tsoskounoglou.</footer> 
</body>

</html>
Nat
  • 67
  • 1
  • 10
  • thank you for you time. It seems like omitting the width makes it worse for some unknown reason. Also clear: both works for some, also unknown reason. But again thank you for your time. – Alexandros Tsos Jan 06 '17 at 02:49
  • omitting the width would eliminate the element. It looks like kornelia's answer is simpler and probably a better approach though. – Nat Jan 06 '17 at 03:03
0

@charset "utf-8";
h1 {
 font-size: 2em;
 font-family: league-gothic;
 font-style: normal;
 font-weight: 400;
}
h2 {
 font-family: bitter;
 font-style: normal;
 font-weight: 400;
 font-size: 1.2em;
}
nav {
 background-color: #222325;
 color: #FFFFFF;
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}
footer {
 text-align: center;
 color: #FFFFFF;
 background-color: #222325;
 font-size: x-small;
 margin-top: 5%;
 margin-right: 5%;
 margin-bottom: 5%;
 margin-left: 5%;
 padding-top: 5px;
 padding-bottom: 5px;
    clear:both;

}




body {
 font-family: source-sans-pro;
 font-style: normal;
 font-weight: 200;
}
.assideLeft {
 width: 30%;
 margin-left: 5%;
 margin-right: 2.5%;
 float: left;
}
.sectionRight {
 width: 50%;
 margin-left: 2.5%;
 margin-right: 5%;
 float: right;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default;league-gothic:n4:default;bitter:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>LADY M 
  <nav>Home About Fashion Contact </nav>
</header>
<aside class="assideLeft">
   <h1>Where fashion meets everyday standards.</h1>
</aside>

<section class="sectionRight">
 <h2>Woman News</h2>
<p>I am an economics student that is interested in fashion, mode, trending styles and woman's life style. I have a successful account at Polyvore, where I communicate with other people, check new trend, have fun and doing my part to make the world a more beautiful place.</p>
</section>

<footer>Copyright Alexandros Tsoskounoglou.</footer> 
</body>

</html>
Sumer Parveen
  • 70
  • 6