Column gap in HTML?

[aceandjocelyn]

Okay, I'm pretty new to actually writing code, and I'm having a hard time coding column gaps for the columns here. Here's the CSS I used for the columns:
.column {
margin-bottom: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.column .col-group {
padding: 10px;
display: block;

}
@media only screen and ( min-width: 1025px ) {
.column-wrap {
width: 1366px;
max-width: calc( 100% + 20px );
margin: 0 -10px;
overflow: hidden;
}
.column {
padding: 0 10px;
float: left;
overflow-y: scroll;
overflow-x: hidden;
height: 20em;
border: 4px double;
border-radius: 6px;

}
.column-wrap .one-half {
width: 50%;
}
}

This is the code I used when actually making the columns:

<div class="column-wrap">
<div class="column one-half">
<div class="col-group">
<h1>WELCOME TO MY JOURNAL!</h1> <br>
I figured that if I have a neocities site, I should have some kind of blog... I hope I don't get too personal on here, but I have a tendency to overshare. Well, here we go. I think I'll reformat this some time in the future when I know more about HTML and CSS and everything... Not really a fan of the current layout, but, okay!
</div>
</div>
<div class="column one-half">
<div class="col-group">Sample Text</div>
</div>

Does anyone know how to add column gutters? HELP!

 

[#mkb#]

Reduce the column-width to less than 50% and add some margin.
Or add a third column with the gap width you desire.

Also: I recommend taking a look at flexbox. It might be a bit more complicated at first, but it's the modern approach for such things and it offers many convenient features.

 

[aceandjocelyn]

Reduce the column-width to less than 50% and add some margin.
Or add a third column with the gap width you desire.

Also: I recommend taking a look at flexbox. It might be a bit more complicated at first, but it's the modern approach for such things and it offers many convenient features.

Thanks for the tip. Also, I tried flexbox but just kind of got confused and went the easy route. I think I'll try it again, though. Much appreciated.

 

[tehnokraat]

Okay, I'm pretty new to actually writing code, and I'm having a hard time coding column gaps for the columns here. Here's the CSS I used for the columns.
....
Thi
Does anyone know how to add column gutters? HELP!

Here is the site that can help You
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-gap

Read more about html, css, etc
https://www.w3schools.com/html/default.asp

PS. the example above is very cumbersome, obsolete and contains many obsolete elements that are no longer used.

 

[Julie Fischer]

You can modify your CSS to include a margin between the columns. In your .column CSS, add a margin-right to create space between the columns:

.column {
  margin-bottom: 20px;
  margin-right: 10px; /* Add this line to create column gutters */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

By adding margin-right: 10px; (or adjust the value as needed) to your .column class, you'll create a gap between each column, giving the appearance of column gutters. Feel free to adjust the margin value to achieve the desired spacing.

 

[tehnokraat]

.column {
margin-bottom: 20px;
margin-right: 10px; /* Add this line to create column gutters */
box-sizing: border-box;
}

they are no longer needed, it is history now
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;