Separating two divs

Question

I'm creating a page, at the top of which there is a button (aligned to the right), followed by the main page content in a div.

I've encountered an issue when trying to separate the button and the main content div. The two divs are currently overlapping. I don't imagine this to be a huge issue, but I'd like to clarify what the most accepted way of separating these would be, rather than just messing about with margins etc.

.view-all-container {
  display: block;
  float: right;
  margin-bottom: 40px;
}

.view-all {
  background-color: #808080;
  color: #fff;
  padding: 10px;
}


.main-section {
  height: 400px;
  background-color: #ebebeb;
}

<div class="view-all-container">
  <a class="view-all">View our range of holiday homes</a>
</div>

<div class="main-section">
  
</div>

I've found that when I add a margin-top: 50px to .main-section the button travels with it, as if it's contained within the same div.

Answer 1

If you are looking for best practices then consider the following:

1) Avoid using float. There are many better ways to get elements where you want them without needing to revert to a complicated process. The biggest problem with float is that it removes your element from the normal DOM flow. https://designshack.net/articles/css/farewell-floats-the-future-of-css-layout/, https://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/

2) If you are navigating, then use the <a> tag. If you are doing something on the same page use a <button> or <input type='button'/> https://davidwalsh.name/html5-buttons

Here is a simple fix for what you want:

.view-all-container {
  margin-bottom: 10px;
  text-align: right;
}

.view-all {
  background-color: #808080;
  border: none;
  color: #fff;
  padding: 10px;
  text-align: middle;
}


.main-section {
  height: 400px;
  background-color: #ebebeb;
  padding: 5px;
}

<div class="view-all-container">
  <button class="view-all">View our range of holiday homes</button>
</div>

<div class="main-section">
  Stuff in the main section
</div>

I removed the float and changed to text-align. The <div> is already display: block so I removed that.

I assumed that your button at the top was to make changes on the active page so I changed the html from an <a> tag to a <button>.

---

If you don't want to use text-align then try flex-box:

.view-all-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.view-all {
  background-color: #808080;
  border: none;
  color: #fff;
  padding: 10px;
}


.main-section {
  height: 400px;
  background-color: #ebebeb;
  padding: 5px;
}

<div class="view-all-container">
  <button class="view-all">View our range of holiday homes</button>
</div>

<div class="main-section">
  Stuff in the main section
</div>

One of my favorite quotes about using float comes from this article: https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.

Don’t be fooled. You’re being brainwashed.