First Website - messing around but the second column moves down when I add margins (not next to the first column) - don't know how to fix

41 Views Asked by Emmalee At 25 October 2023 at 16:49

body {
  background-color: #040081;
  font-family: Arial, Helvetica, sans-serif;
  padding: 50px;
  box-sizing: border-box;
}

.header {
  padding: 20px;
  background-color: #1612AA;
  text-align: center;
  font-family: "Roboto" sans-serif;
  font-size: 40px;
  text-shadow: 2px 0 #F36502, -2px 0 #F36502, 0 2px #F36502, 1px 1px #F36502, -1px -1px #F36502, 1px -1px #F36502, -1px 1px #F36502;
  position: relative;
  height: 200px;
}

.part1 {
  float: left;
  width: 80%;
}

.part2 {
  float: right;
  width: 20%;
}

.img1 {
  border-radius: 20px;
  margin-top: 10px;
}

.row:after {
  display: grid;
  clear: both;
}

.columnLeft {
  float: left;
  width: 70%;
  margin-top: 50px;
}

.columnRight {
  float: right;
  width: 30%;
  margin-top: 50px;
  margin-left: 50px;
}

.card {
  background-color: #1612AA;
  color: #F36502;
  padding: 20px;
}

.img2 {
  border-radius: 20px;
  width: 80%;
  padding-left: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Fractal Forward</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="header">
    <h1 class="part1">Fractal Forward</h1>
    <img src="mandelImage.webp" class="part2 img1">
  </div>

  <div class="row">
    <div class="columnLeft">
      <div class="card">
        <h2>Blog Entry Title</h2>
        <img src="image1.jpeg" class="img2">
        <p>This is the beginning of the blog Yay Yay Ya! The first couple sentences. Eventually I'm going to figure out how to code it so the first three sentences are automatically here and I don't have to type it out...</p>
      </div>
    </div>
    <div class="columnRight">
      <div class="card">

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

</html>

I tried adding 'margin-left: 50px;' to the .columnRight class so that there'd be space in-between the two columns, but every time I do that it shifts columnRight underneath columnLeft. Without the margin-left for the column there's no separation between the two columns and it doesn't look very good. Not sure how to fix this, or what I did wrong. This is my first attempt at creating a website and this has been my first real sticking point. Any help would be greatly appreciated - thanks!

Original Q&A

There are 2 best solutions below

codeandcloud On 25 October 2023 at 17:08

Use the CSS function calc like this.

.columnRight {
  /*other properties*/
  width: calc(30% - 50px);
  /*other properties*/
}

David On 25 October 2023 at 17:34

The problem is that 80% + 20% equals 100%, so 80% + 20% + 50px is greater than 100%.

Instead of specifying column sizes on the elements and using the older float layout algorithm, I suggest setting column sizes on the containing element and use CSS’s modern grid algorithm to handle the exact implementation details:

<head>
  <!-- ... -->
  <style>

    .row {
    display: grid;
    grid-template-columns: 80% 20%;
    }

    .columnLeft,
    .columnRight {
    width: initial;
    }

  </style>
</head>
<!-- ... -->

Then you don’t need to use float, clear, or ::after. Using the grid algorithm also allows you to add a gap property to the row div.

First Website - messing around but the second column moves down when I add margins (not next to the first column) - don't know how to fix

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-GRID

Related Questions in MARGIN

Related Questions in MARGIN-LEFT

Trending Questions

Popular # Hahtags

Popular Questions