CODEWITHSUNDEEP
htmlcss
user9757285
user9757285

Reputation:

How I create column gaps that are maintained when resizing webpage?

My site currently

[this is my HTML:][2]

<div class="column-box" style="width: 100%"></div>

<div id="column1" style="float:left; margin:15; width:33%;">

 <p>ALEX BURGER<br>
I am a Graphic Designer and Photographer with a strong focus on typography and editorial design.
    </p>   
</div>

<div id="column2" style="float:left; margin:15;width:33%;">
  <p>EDUCATION<br>

etc..

I tried adding margin and padding in css but didnt do anything 

.column1 {
padding: 50px !important;
}

Is there a whole different way of doing this that would be better to get the same effect? I want the text in each column to stay in their respective columns

Any help would be much appreciated

Upvotes: 0

Views: 34

Answers (2)

abney317
abney317

Reputation: 8492

Your "column1" is an id not a css class so it should be represented like this in the css: #column1

If you want to use a class you need to add something like class="column" to you divs and then add css to .column

Your inline styles are not working for the margins because you just put 15 instead of 15px

.column {
  float: left;
  width: 33.33%;
  padding: 30px;
  box-sizing: border-box;
}
<div class="container">
  <div class="column">col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 </div>
  <div class="column">col2</div>
  <div class="column">col3</div>
</div>

Using a flexbox or grid would also be options.

Upvotes: 1

Friday Ameh
Friday Ameh

Reputation: 1684

You can try this out

*{
  box-sizing: border-box;
}

.parent{
  width: 100%;
}

.child{
  width:33.33%;
  padding: 20px;
  float: left;
}
<div class="parent">
<div class="child">
<h3>Heading</h3>
<p>
Is there a whole different way of doing this that would be better to get the same effect? I want the text in each column to stay in their respective columns

Any help would be much appreciated
</p>
</div>
<div class="child">
<h3>Heading</h3>
<p>
Is there a whole different way of doing this that would be better to get the same effect? I want the text in each column to stay in their respective columns

Any help would be much appreciated
</p>
</div>
<div class="child">
<h3>Heading</h3>
<p>
Is there a whole different way of doing this that would be better to get the same effect? I want the text in each column to stay in their respective columns

Any help would be much appreciated
</p>
</div>
</div>

Upvotes: 0

Related Questions