Column gap in HTML?

aceandjocelyn

Beta member
Messages
2
Location
Cumming, Georgia
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#

Solid State Member
Messages
6
Location
Austira
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

Beta member
Messages
2
Location
Cumming, Georgia
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.
 

kalju

In Runtime
Messages
300
Location
EU
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.
 
Top Bottom