CSS Float Applied But Text Not Showing Up At All?

Question

I am trying to follow the box model style of website design showed in thenewboston's video, but when I apply the float element and refresh my site shows up blank.

Here is a snippet of my CSS and HTML.

CSS

* {
   margin: 0px;
   padding: 0px;
}

  h2 { 

    font: bold 23px "Times New Roman";
    color: black;
}

  h3 { 
  font: italic 16px "Times New Roman";
 }

 header, section, footer, aside, nav, article, hgroup {
 display: block;
 }

 body { 
  text-align: center;
 }

#page_wrapper {

    width: 1000px;
    margin: 20px auto;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
  }


#top_header {

    font-family: "Times New Roman";
    font-size: 23px;
    padding: 10px; 
    font-decoration: italic;
    color: white;
    background: #454545;
 }

 #top_menu {

     background: #454545;
     color: white;
     padding: 3px;
     border: 1px solid black;
     font: italic 20px Georgia;
 }


 #top_menu li { 
     display: inline-block;
     list-style: none;
     padding: 5px;
     font: italic 14px "Times New Roman";
     color: white;

 }

#new_div {

    display: -webkit-box;
    -webkit-box-orient: horizontal;
  }

 #page_section {

 float: left;
 width: 660px;
 margin: 30px;
 border: 1px solid black;
 font: 15px "Times New Roman";
 }

 #page_aside {
  float: left;
  width: 220px;
  margin: 20px 0px;
  padding: 30px;
  border: 1px solid black;
  background: #DCE1E3;
  text-align: center; 
  font: 15px "Times New Roman";
  }

HTML

 <head>
<meta charset="utf-8" />


<title>A Website</title>

<link href="styles1.css" type="text/css" rel="stylesheet" /> 

</head>

<body>
<div id="page_wrapper">
<header id="top_header">
<h1>A Website</h1>
</header>

<nav id="top_menu">
<ul style="list-style-type:none">

<li><a href="http://www.google.com">Home</a></li>

<li><a href="http://www.google.com">About</a></li>

<li><a href="http://www.google.com">Portfolio</a></li>

<li><a href="http://www.google.com">Contact</a></li>

</ul>

</nav>

<div id="new_div">

<section id="page_section">
<article>
<header>
<hgroup>
<h2>I am an H2 Article Title</h2>
<h3>I am an H3 Article Subtitle</h3>
</hgroup>
</header><br><br>

<p>Hi I'm a paragraph. La La La !</p> <br><br>
</p>
</article>
</section>

<aside id="page_aside">
<h4>Updates for the Website</h4><hr><br>
<p>- I'm an Update</p><br>
<p>- So Am I!</p>
</aside></div><br>
</div>

</body>
</html>

I dont have time to fix your code. But basically, you have to apply a clearfix class to stop your content from collapsing when you use floats. Unfortunately, this is not the problem with your code. I had a hard time reading your code and figuring out what was happening. Just check out w3schools and go through things slowly! Good luck. — wdfc, Oct 15 '16 at 01:22
@WillDiFruscio Thank you for trying to help me! I don't understand what you mean when you say to use a clearfix class. I'm not sure what to fix. — Jane Done, Oct 15 '16 at 01:26

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Will is refering to the clearfix: both; CSS rule, which means any element with this rule will "clear" any previous elements that have floats.

Try adding the following div element in between your main blocks and you should start getting a different result. You can of course apply the clearfix rule to the main element blocks themselves but heres a very basic example.

.clearfix {
  float: left;
  clear: both;
  width: 100%;
}

Then the element to use between main blocks or even as the last child element in your container:

<div class="clearfix"></div>

For a more detailed answer regarding what a clearfix is refer to this question.

edited May 23 '17 at 12:00

Community

1
1

answered Oct 15 '16 at 03:06

Jesse

429
6
12

Thank you. So I would add this .clearfix code right after the tag or would it be somewhere else? – Jane Done Oct 15 '16 at 03:22
if you're not floating all of your main building blocks you will need to add it anywhere after there is a floated element. See the second answer in the about link for a visual explanation. – Jesse Oct 15 '16 at 03:28

score 0 · Answer 2 · answered Oct 20 '16 at 08:30

Try this piece of code, it will work..

* {
   margin: 0px;
   padding: 0px;
}

  h2 { 

    font: bold 23px "Times New Roman";
    color: black;
}

  h3 { 
  font: italic 16px "Times New Roman";
 }

 header, section, footer, aside, nav, article, hgroup {
 display: block;
 }

 body { 
  text-align: center;
 }

#page_wrapper {

    width: 1000px;
    margin: 20px auto;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
  }


#top_header {

    font-family: "Times New Roman";
    font-size: 23px;
    padding: 10px; 
    font-decoration: italic;
    color: white;
    background: #454545;
 }

 #top_menu {

     background: #454545;
     color: white;
     padding: 3px;
     border: 1px solid black;
     font: italic 20px Georgia;
 }


 #top_menu li { 
     display: inline-block;
     list-style: none;
     padding: 5px;
     font: italic 14px "Times New Roman";
     color: white;

 }

#new_div {

    display: -webkit-box;
    -webkit-box-orient: horizontal;
  }

 #page_section {

 float: left;
 width: 660px;
 margin: 30px;
 border: 1px solid black;
 font: 15px "Times New Roman";
 }

 #page_aside {
  float: left;
  width: 220px;
  margin: 20px 0px;
  padding: 30px;
  border: 1px solid black;
  background: #DCE1E3;
  text-align: center; 
  font: 15px "Times New Roman";
  }

<html>
<head>
<meta charset="utf-8" />


<title>A Website</title>

<link href="styles1.css" type="text/css" rel="stylesheet" /> 

</head>

<body>
<div id="page_wrapper">
<header id="top_header">
<h1>A Website</h1>
</header>

<nav id="top_menu">
<ul style="list-style-type:none">

<li><a href="http://www.google.com">Home</a></li>

<li><a href="http://www.google.com">About</a></li>

<li><a href="http://www.google.com">Portfolio</a></li>

<li><a href="http://www.google.com">Contact</a></li>

</ul>

</nav>

<div id="new_div">

<section id="page_section">
<article>
<header>
<hgroup>
<h2>I am an H2 Article Title</h2>
<h3>I am an H3 Article Subtitle</h3>
</hgroup>
</header><br><br>

<p>Hi I'm a paragraph. La La La !</p> <br><br>
</p>
</article>
</section>

<aside id="page_aside">
<h4>Updates for the Website</h4><hr><br>
<p>- I'm an Update</p><br>
<p>- So Am I!</p>
</aside>
  </div><br>
</div>

</body>
</html>

CSS Float Applied But Text Not Showing Up At All?

2 Answers2