Adding clearfix to CSS

HTML & CSS
1

Hi,

A CSS coding error is causing the links on the divs in the code below not to work except for the first one https://bankruptcycanada.com/bankruptcy-calculators

HTML:

<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/calculator-icon.png" alt="Calculators"><a
href="https://bankruptcycanada.com/bankruptcy-calculators/">Calculators</a>
<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/quiz-icon-1.png" alt="Quizzes"><a
href="https://bankruptcycanada.com/category/quizzes/">Quizzes</a></div>
<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/infographic-icon.png" alt="Infographics"><a
href="https://bankruptcycanada.com/tag/infographic">Infographics</a></div>
<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/slideshare-icon.png" alt="Slideshares"><a
href="/tag/slideshare">Slideshare</a></div>
<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/podcast-icon.png" alt="Podcasts"><a
href="/tag/podcast">Podcasts</a></div>
<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/videos-icon.png" alt="Videos"><a
href="https://www.youtube.com/channel/UCr7rKh_MdV3QtPPqCAyRwlg" target="_blank">Videos</a></div>
<div class="sidebar-content-library"><img
src="https://bankruptcycanada.com/wp-content/uploads/2017/02/dictionary-icon.png" alt="Glossary"><a
href="https://bankruptcycanada.com/references/canadian-bankruptcy-dictionary/">Debt Management Terms</a></div>

CSS:

.sidebar-content-library {
      color: #013722 !important;
  list-style: none; 
  float:left;}
  .sidebar-content-library {
    background-color: #F6F9FE;
    margin-bottom: 0.23em;
    padding: 10px 0 0 0;
    float: left;
    vertical-align: middle;
      color: #002656 !important;
      border: 1px solid #013722;
    width: 100%; }
    .sidebar-content-library div {
      float: left;
      margin-left: 20px; }
      .sidebar-content-library div a {
        color: #013722 !important;
        font-family:Arial, Helvetica, sans-serif;font-size:0.9em;font-style:normal;font-weight:bold;
        text-transform: none; }
        .sidebar-content-library div a:visited {
      color: #002656 !important;}
      
              .sidebar-content-library img { 
                  padding:0 6px 10px 4px;
      float:left;
      vertical-align: middle;
              }

The css style applied to each div is sidebar-content-library. I think I need to clear the floats for each div.
How can I do so? I would appreciate a pointout because I’ve tried everything and I can’t get the hyperlinks on the divs after the first one to work.

Thanks

2

You haven’t closed your first div. Try fixing your html first.

1 Like
3

Whoops )) thanks yes you are right…I fixed that but the links still don’t work. I wonder if I still need to apply a clear css? Thanks ))

4

Please EXPLAIN what “doesn’t work” means. In what way do the links not “work”. They are indeed performing the way they are coded, so I do not know what you expect to see. A make-believe screen shot might help clarify a description.

When I looked at the site earlier, I did not find “sidebar-content-library” in the HTML for the page that you linked to. That added to my uncertainty to your expectations.

Finally, run your HTML through the HTML Validator. I don’t know if fixing the errors will change the behavior of your links, or not. But invalid HTML cannot be assured to give the best cross-browser behavior.
https://validator.w3.org/nu/
https://validator.w3.org/nu/?doc=https%3A%2F%2Fbankruptcycanada.com%2F (Click the “Message Filtering” button for a summary view)

FYI: at this time, the links disappear as the width narrows. I do not see them replaced by (moved into) a hamburger menu. I’m using Firefox 52.0.5

5

hi sorry the code is on this page https://bankruptcycanada.com/bc-bankruptcy-exemptions/ under “Information Library”

The link to the bankruptcy calculator page works but the subsequent links in the information library are not clickable

6

Its because you are floating everything and the background of the heading div is sitting on top of all your links. You could add clear:both to ,heading or perhaps better to unfloat those links and use another containment mechanism.

e.g.

.sidebar-content-library{float:none;overflow:hidden;}

7

Well i redesigned the hyperlink list as long as there is no ID with the left-content name it should work, I did copy and paste everything on that web page and pasted my code over that list there appears to be small changes to some of the content for example the headings arn’t blue and the list below those links arn’t showing the arrows but are showing bullets.

I am sorry about those issues I think maybe I pasted over some of the “other” content like a class name maybe but you can try it if you know how much to replace as I can not read that page so well it’s a mess.

Other than the missing div or class I pasted over it didn’t effect anything else on the page as I can see. try it if it doesn’t work do CTRL + Z If you can,

HTML:

<ul>
		<h4>Information Library</h4>
	
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/calculator-icon.png);"><a href="#">Calculators</a></li>
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/quiz-icon-1.png);"><a href="#">Quizzes</a></li>
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/infographic-icon.png);"><a href="#">Infographics</a></li>
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/slideshare-icon.png);"><a href="#">Slideshare</a></li>
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/podcast-icon.png);"><a href="#">Podcasts</a></li>
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/videos-icon.png);"><a href="#">Videos</a></li>
		<li style="list-style-image:URL(https://bankruptcycanada-com-0fnvvltoqg3vqf3t.netdna-ssl.com/wp-content/uploads/2017/02/dictionary-icon.png);"><a href="#">Debt Management Terms</a></li>
	</ul>

also remember to apply the link names back there as they are currently “#”.

CSS:

#left-content{
			display:inline;block;
			}
		#left-content ul{
			min-width:183px;
			margin:0px;
			padding:0px;
			}
		#left-content li{
			padding:10px 5px 10px 55px;
			border:#111 solid 1px;
			width:100%;
			list-style-position:inside;
			text-indent:-45px;
			margin:5px 0px;
			}
		#left-content a:link,a:visited{
			vertical-align:bottom;
			line-height:50px;
			color: #568fbf;
			text-decoration:none;
			}
8

This is not valid html.:slight_smile: All content in a ul must be inside li tags.

9

Alright sorry that doesn’t necessarily have to be there as there is already classes on that heading 4 on the page probably why the colour wasn’t blue.

but if the style is right the heading should align with the list.

I usually have it inside to make sure that when heading needs to be aligned with listed items than they automatically do when placing them inside the <ul> tags.

obviously extra line of styles would be required to style the header but yeah your right sorry :slight_smile:

This way does come in handy when using the checkbox hack :smiley: since only style needed to apply is checking the checkbox to unhide <li> tags and it will only work in that ul since the checkbox is a sibling so it doesn’t effect anything outside the <ul> tags.

10

Thanks Paul and Nathan )) I worked it out taking the float left out))) You are life savers thanks so much again.

11

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