CODEWITHSUNDEEP
htmlcss
user55555
user55555

Reputation: 43

HTML/CSS sections not working properly

I have a simple HTML/CSS media site. It is broken up into a header, 2 sections, and a footer. It looks ok now, but in order for me to adjust top margin on second section I need to go at least 155px before it will even move. Basically everything is around 155px too high? What is causing this? Even my footer needs at least 155px top margin before it will even move. Can anyone see anything? I'm sure I am making a very stupid error.

Here is a JSFiddle of my issue, I've also posted the code below.

@charset "UTF-8";
body {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
	max-width: 960px;
}
#wrapper {
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	position: absolute;
}
header {
	height: 95px;
	border-left: thin solid #000000;
	border-right: thin solid #000000;
	border-bottom: 4px solid #867E7E;
	border-top: thin solid #000000;
	background-color: #000000;
	width: 100%;
	opacity: 0.8;
	display: block;
	margin-bottom: 35px;
}
.top-nav {
	float: right;
	margin-right: 10%;
	margin-top: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
	display: inline;
	padding-right: 2px;
}
.top-nav ul li {
	display: inline;
	margin-left: 20px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	float: left;
	text-decoration: none;
}
.top-nav ul li a {
	color: #FFFFFF;
	text-decoration: none;
	display: inline;
}
.top-nav li a:link        , top-nav li a:visited {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: inline;
	text-decoration: none;
}
.top-nav li a:hover      , top-nav li a:active      ,top-nav li a:focus {
	color: #867E7E;
	display: inline;
}
.top-nav a.selected {
	color: #867E7E;
}
.social-media-top {
	display: inline;
	float: right;
	margin-right: 41px;
	margin-top: 51px;
}

.social-icon {
	width: 20px;
	height: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 5px;
	margin-left: 5px;
}

#music-content {
	list-style-type: none;
	display: block;
}
#music-content h2 {
	margin-left: 35px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0,0,0,1.00);
	display: block;
}
#music-content li {
	text-align: left;
	display: block;
	width: 45%;
	float: left;
	padding-top: 15px;
}
#music-content a {
	text-decoration: none;
	display: block;
	float: left;
}
#music-content p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}
.music-info {
	display: block;
	float: left;
	margin-left: 15px;
}
#movie-content {
	list-style-type: none;
	display: block;
}
#movie-content h2 {
	margin-left: 35px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0,0,0,1.00);
	display: block;
	clear: both;
}
#movie-content li {
	text-align: left;
	display: block;
	width: 45%;
	float: left;
	padding-top: 15px;
}
#movie-content a {
	text-decoration: none;
	display: block;
	float: left;
}
#movie-content p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}
.movie-info {
	display: block;
	float: left;
	margin-left: 15px;
}

img {
	max-width: 100%;
}



footer {
	height: 55px;
	background-color: #E8EBEF;
	color: #000000;
	clear: both;
	text-align: center;
	border-top: 1px solid #C0C0C0;
	float: none;
}
.bottom-nav {
	float: left;
	padding-left: 0px;
	padding-right: 0px;
	clear: both;
	display: inline-block;
	margin-top: 20px;
}
.bottom-nav ul li {
	display: inline;
	float: left;
	text-decoration: none;
	margin-right: 3px;
	margin-left: 0px;
}
.bottom-nav ul li a {
	color: #000000;
	text-decoration: none;
}
.bottom-nav li a:link         , bottom-nav li a:visited {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: block;
	text-decoration: none;
}
.bottom-nav li a:hover       , bottom-nav li a:active       ,bottom-nav li a:focus {
	color: #867E7E;
}
.bottom-nav a.selected {
	color: #867E7E;
}

.copyright {
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
}
footer p {
	text-align: center;
}
.social-media-bottom {
	float: right;
	display: inline;
	margin-top: 20px;
	margin-right: 41px;
}
#media-content {
	width: 100%;
	display: inline-block;
}
<!doctype html>


<title>Media Page - </title>

<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">


<body>
<div id="wrapper">
  <header>
       
    <div class="social-media-top">
  	 	<a href="http://twitter.com"><img src="images/twitter_gray_48.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="images/fb_white_1024.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="mailto:[email protected]">
        	<img src="images/mail.ico" alt="mail" class="social-icon">
        </a>
    </div>	
    <nav class="top-nav">
   		 <ul>
            <li><a href="page_index.html">Home</a></li>
            <li><a href="media.html" class="selected">Media</a></li>
           <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
    </nav> 
   
  </header>
  
  

  <section id="music-content">
  		<h2> Music Selections </h2>
    	<ul>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 1</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
          </li>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 2</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 3</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 4</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li>                      
       </ul>
  </section>
  
  <section id="movie-content">
  		<h2> Movie Selections </h2>
    	<ul>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 1</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
          </li>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 2</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 3</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 4</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li>                      
       </ul>
  </section>
 
 
  
  <footer>
  	<nav class="bottom-nav">
   		 <ul>
            <li><a href="page_index.html">Home</a></li>
            <li><a href="media.html" class="selected">Media</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
    </nav> 
  	<div class="social-media-bottom">
  	 	<a href="http://twitter.com"><img src="images/twitter_blue_48.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="images/fb_blue_1024.png" alt="Facebook Logo" class="social-icon"></a>
    </div>	 
  	<div class="copyright">
   	  <p>&copy; 2015</p>
    </div>
  	
  </footer>
</div>
</body>

Upvotes: 0

Views: 658

Answers (1)

zgood
zgood

Reputation: 12571

You need to clear the floats of your li's. I have updated your Fiddle by adding a clearfix style to your section's.

Fiddle

The style updates were:

#music-content:after {
  content: "";
  display: table;
  clear: both;
}

and

#movie-content:after {
  content: "";
  display: table;
  clear: both;
}

When you float and element you take it out of the "flow" of the document. Meaning that it's parent container (your section's) were not receiving the height of your floated li's (which happened to be around 155px). They were only getting height from the <h2> headers.

Upvotes: 1

Related Questions