Some divs in CSS file don't display properly

Question

I am stuck on this as the div with an id "img-section" below does not properly work in my css file. For some reason,CSS stylings are not applied to #img-section but instead, #bottom-section wraps the entire section of the imgs that I cannot independently change any of the bottom section inside divs.

Here is my html and CSS which strangely work by having a border on the very top of the img section and right below another border in the title section. I want this border to appear on the bottom of the img section but no luck.

<html>
<head>
    <title>hello</title>
    <meta charset = "utf-8" />
    <style type="text/css">

  img {
    width:30%;
    float:left;
    margin: 1.66%
  }

  #title-section {

    font-family:serif;
    font-size:15px;
    text-align:center;
    text-transform:lowercase;
    margin-left:1.66%;
    margin-bottom:10px;
    border-bottom:7px solid black;
    border-top:7px solid black;
    width:96.68%;

      }

/*  hr {border-top:7px solid black;
    width:96.68%;
    margin-left:1.66%;

  }*/

  #bottom-section {
    border-top:7px solid black;
    width:96.68%;
    margin-left:1.66%;
  }


</style>

</head>

<body>
<div id="title-section">
  <h1 >h e l l o</h1>

  <h3 ><ins>[ ma - own - compilation - of - all - things - cool ]</ins></h3>

  <h4>by Mimicat</h4>
</div>

<div id="img-section">
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790" >
     <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790" >
     <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790" >
</div>


  <div id="bottom-section">
      <form>
          <p><strong>Did you enjoy this collection?</strong></p>
          <p>Hell yeah! <input type="checkbox" checked> Nah - <input type="checkbox"> </p>
          <p><input type="submit"></p>
      </form>
  </div>
</body>
</html>

Anything wrong with my code? How can I fix this problem? I want to make a border under images or on the top of the div#bottom-section, but when I put border-top inside #bottom-section, it creates a border right below the div#title-section instead, and it drives me nuts. Any suggestions? Thank you!

Is it the whole css style you have or it's just some parts of it? — Aboozar Rajabi, Jul 02 '16 at 01:57
Hi, Aboozar! I just edited my post with all my css and html. — Mimicat, Jul 02 '16 at 02:08
Always run your HTML and CSS thru the W3C Validator. http://validator.w3.org you have a few errors, and your
tag is not closed. — heart.cooks.mind, Jul 02 '16 at 02:09
Please fix your indentation and the closing tag of your containers. Your browser might rendered wrongly of the way it was coded. — Wesley Brian Lachenal, Jul 02 '16 at 02:13
Hello, everyone. I did edit my code, but it's still not working properly. T_T.... — Mimicat, Jul 02 '16 at 02:38

score 2 · Accepted Answer · answered Jul 02 '16 at 02:41

2

The issue is that all the child elements of #img-section are floated, so #img-section has no height. To fix this you need what is referred to as a "clearfix" some examples here. Working example of your code here

answered Jul 02 '16 at 02:41

JustH

1,372
8
8

This is the best solution. However, another solution is to add a proper `height` to the `#img-section` instead of using `clearfix` – Aboozar Rajabi Jul 02 '16 at 02:49
Yay! It worked! Thank you so much. I really had no idea what clearfix was, but thanks to you, I can learn it now! – Mimicat Jul 02 '16 at 04:05
@AboozarRajabi I will try that method as well! Thanks so much! :) – Mimicat Jul 02 '16 at 04:06
@Mimicat glad it worked. Please make the answer as accepted. – JustH Jul 05 '16 at 05:48

score 1 · Answer 2 · answered Jul 02 '16 at 01:35

1

Have you tried using:

<div class="img-section">

rather than an id? Then in css:

.img-section{
}

Also, do you have a copy of your css? Just so we can see if there is anything unusual going on there.

answered Jul 02 '16 at 01:35

LJW

11
1

I did change it to div.img-section as you suggested, but I am in no luck. For some reason, my css file does not recognize it and again, the div#bottom-section wraps the entire img section :( I have just added my CSS file :) – Mimicat Jul 02 '16 at 01:38

score 1 · Answer 3 · answered Jul 02 '16 at 02:46

Your images float so you will want/need to clearfix their container.

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

#title-section {
  font-family: serif;
  font-size: 15px;
  text-align: center;
  text-transform: lowercase;
  margin-left: 1.66%;
  margin-bottom: 10px;
  border-bottom: 7px solid black;
  border-top: 7px solid black;
  width: 96.68%;
}

img {
  width: 30%;
  float: left;
  margin: 1.66%
}

#bottom-section {
  border-top: 7px solid black;
  width: 96.68%;
  margin-left: 1.66%;
}

<div id="title-section">
  <h1>h e l l o</h1>
  <h3>
    <ins>[ ma - own - compilation - of - all - things - cool ]</ins>
  </h3>
  <h4>by Mimicat</h4>
</div>

<div id="img-section" class="clearfix">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790">
</div>


<div id="bottom-section">
  <form>
    <p><strong>Did you enjoy this collection?</strong>
    </p>
    <p>Hell yeah!
      <input type="checkbox" checked>Nah -
      <input type="checkbox">
    </p>
    <p>
      <input type="submit">
    </p>
  </form>
</div>

@AboozarRajabi, your downvote is inappropriate. This answer was posted within seconds of the one you commented on. I saw it only after I posted my answer. I would have deleted my answer except with an onsite working example, it is clearly better. — JonSG, Jul 02 '16 at 14:31

score 0 · Answer 4 · answered Jul 02 '16 at 01:55

0

Use <hr> between those two sections. You can change its style and use it like:

<hr style="margin:8px auto">

answered Jul 02 '16 at 01:55

Aboozar Rajabi

1,683
21
26

Thanks for the tip! But I'd like to know why my code doesn't work properly. If I used hr and change its display to none, still the same problem occurs. If I style it like the border I wanted to have, it looks slightly odd in the edge. Why is this happening? :( – Mimicat Jul 02 '16 at 02:02
This is not a useful answer. Clearing floats with a trailing HR tag while technically possible is not done in practice as better methods have existed for years. – JonSG Jul 02 '16 at 14:42
@JonSG Thanks for your comment, if you know any better methods rather than using `clearfix`, let us know – Aboozar Rajabi Jul 02 '16 at 15:53
1

@AboozarRajabi, This article has a summary of techniques to clear floats including several "clearfix" implementations and the "overflow" method. http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use This article has a future fix using contain-floats https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/ – JonSG Jul 02 '16 at 16:08
@JonSG Thanks, it's useful – Aboozar Rajabi Jul 02 '16 at 22:26

Some divs in CSS file don't display properly

4 Answers4