How to add a margin-top to a hr in a div?-CodePudding

i have a div called containerquarter that contains three left-floating divs. Now i want to put a horizontal rule under the floating divs but inside the containerquarter. So of course i need a clear for the hr. In addition i want a gap between the floating divs and the hr. I added a margin-top to the hr but the margin overlapps the div elements and i don't get a gap. I thought it could be a margin-collapse-problem but it isn't. What can i change in my code?

* {
    margin: 0;                          
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
.left {
    float: left;
}
.clrleft {
    clear: left;
}
.containerquarter {
    width: 1200px;
    margin: auto;
    overflow: hidden;
}
.settings {
    width: 260px;
    margin-left: 20px;
}
.settings select {
    width: 260px;
    height: 60px;
    margin: 10px 0px 0px 0px;
    padding: 0px 10px;
    border: 1px solid grey;
    font-size: 18px;
    appearance: none;
}

<!-- Footer -->
    <footer>
        <div >
            <div>
            <div >
                <form>
                    <select id="lang">
                        <option value="ger">German</option>
                        <option value="en">English</option>
                    </select>
                    <select id="cur">
                        <option value="eur">Euro</option>
                        <option value="dol">Dollar</option>
                    </select>
                </form>
            </div>

            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        
        <hr >
        
        </div>
    </footer>

CodePudding user response：

To accomplish this I did the following:

Remove the div without a class or id that was in .

Remove the float: left; from the .left div class and add position: relative; to the hr.

Add margin-top to the hr.

I would recommend looking into using display: flex; A lot can be done with a better and cleaner code and look using this.

Check it out here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/;

* {
    margin: 0;                          
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.clrleft {
    position: relative;
    margin-top: 20px;
}
.containerquarter {
    width: 1200px;
    margin: auto;
    overflow: hidden;
}
.settings {
    width: 260px;
    margin-left: 20px;
}
.settings select {
    width: 260px;
    height: 60px;
    margin: 10px 0px 0px 0px;
    padding: 0px 10px;
    border: 1px solid grey;
    font-size: 18px;
    appearance: none;
}

<!-- Footer -->
    <footer>
        <div >
           <div >
                <form>
                    <select id="lang">
                        <option value="ger">German</option>
                        <option value="en">English</option>
                    </select>
                    <select id="cur">
                        <option value="eur">Euro</option>
                        <option value="dol">Dollar</option>
                    </select>
                </form>
            </div>

            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        
        <hr >
    </footer>

CodePudding user response：

It looks like adding float removes it out of the normal page flow. From MDN Docs: Floats

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning)

To fix this you can simply add display: inline-block and width: 100% to your hr:

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.clrleft {
  position: relative;
  margin-top: 20px;
}

.containerquarter {
  width: 1200px;
  margin: auto;
  overflow: hidden;
}

.settings {
  width: 260px;
  margin-left: 20px;
}

.settings select {
  width: 260px;
  height: 60px;
  margin: 10px 0px 0px 0px;
  padding: 0px 10px;
  border: 1px solid grey;
  font-size: 18px;
  appearance: none;
}

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

<footer>
  <div >
    <div >
      <form>
        <select id="lang">
          <option value="ger">German</option>
          <option value="en">English</option>
        </select>
        <select id="cur">
          <option value="eur">Euro</option>
          <option value="dol">Dollar</option>
        </select>
      </form>
    </div>

    <div ></div>
    <div ></div>
    <div ></div>
  </div>

  <hr >
</footer>