<footer> container preventing horizontal display of lists?


#1

New to web development/CSS and I feel like I have an understanding of CSS display and position rules, but still struggling to execute them…

I’ve been trying all morning to display 4 unordered lists horizontally across the bottom of my page in a footer. I put each list in a

container with the same class (
)and styled them-
.section{
         width: 25%;
         float: left;
}

I also had all 4 lists inside a <footer> element because i wanted to style a box that would surround all four lists at the bottom of the page. I styled the footer-

footer {
        width: 100%
        display: inline-block;
}

I’ve been googling all morning and changing the codes, but the lists were still lining up vertically. I deleted the footer tag all together from HTML and finally the lists displayed horizontally. Would somebody mind explaining why? Seeing the horizontal display finally alleviated some of my frustration, but I would still like to put these lists inside a parent element so I can style the area surrounding them.

Also, I remember reading in a textbook that since every element in my footer was a float, the footer would technically have no content and I’d have to add an ::after styling to create my box?


#2

Please give us enough of the code which replicates the problem (both html & css) so we can have a look


#3

Ok, thanks-h ere’s the html for the first two lists. I’m not turning the line items into links on this, just practicing-
edit… sorry, this isn’t displaying the HTML as code

<footer>
<div class= "section">
      <h3>The Store</h3>
      <ul>
      <li>About Us<li>
      <li>Facebook</li>
      <li>Twitter<li>
      <li>Infographic</li>
      </ul>
</div>
<div class= "section">
      <h3>Products</h3>
      <ul>
      <li>Online Store</li>
      <li>Gift Boxes</li>
      <li>Collections</li>
      <li>Special Events</li>
      <li>Today's Deals </li>
</ul>
</div>
<div class= "section">
      <h3>Services</h3>
      <ul>
      <li>My Account</li>
      <li>Order History</li>
      <li>Tracking</li>
      <li>Privacy Policy</li>
      <li>Contact Us </li>
</ul>
<div class= "section">
      <h3>Location</h3>
      <p>427 Lake Street<br>
      Chicago, IL 60626 <br>
      (312)432-1937<br>
</div>
</footer>

And the css-

*{
        box-sizing: border-box;
}
body{
       background-color: hsl(199, 50%, 60%);
}
footer{
       background-color: white;
       width: 100%;
       display: inline-block;
}
.section{
       width: 25%;
       float: left;
       color: midnightblue;
}

I hope that’s enough of the code/clear enough. Thanks- this is my first time asking a question on here.


#4

i put your code in a bin:

http://jsbin.com/lamajalaju/edit?css,output

the bin makes it easier for me to work with. So its mostly for myself.

i see one problem:

<div class= "section">
      <h3>Services</h3>
      <ul>
      <li>My Account</li>
      <li>Order History</li>
      <li>Tracking</li>
      <li>Privacy Policy</li>
      <li>Contact Us </li>
</ul>
<!-- missing </div> -->
<div class= "section">

see comment


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.