Question 272323 in Html Question posted in
Some basic documentation can be found here.

Html – 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

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!

Tags:

3

Answers


  1. 0

    The reason why adding margin-left: 50px; to the .columnRight class shifts it underneath .columnLeft is because both columns are floating. When an element floats, it is removed from the normal flow of the document and positioned next to its floated container. This means that the two columns will overlap unless you clear them.

    To clear the floats, you can add the following CSS to your .row class:

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

    The :after pseudo-element creates a new element after the .row element. The content property is used to set the text content of the new element, but in this case we are setting it to an empty string. This means that the new element will be invisible, but it will still take up space in the document. The display: block property makes the new element behave like a block element, and the clear: both property clears both left and right floats.

    Once you have added the :after pseudo-element to your .row class, you should be able to add margin-left: 50px; to the .columnRight class without it shifting underneath .columnLeft.

    Here is an example of how your CSS would look after making these changes:

    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 {
    content: "";
    display: block;
    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;
}

    I hope this helps!

    Login or Signup to reply.
  2. 0

    Use the CSS function calc like this.

    .columnRight {
  /*other properties*/
  width: calc(30% - 50px);
  /*other properties*/
}
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search