html/css displaying content inline

Question

I have made a basic grid for my first website that I am coding from scratch. However, I'm having issues with the content as it keeps overflowing onto the row below.

I've tried a few different things but can't get it to work. If I make the image smaller they will display inline, but I would like to have it all within one row.

See the image below - I have 3 sections of content and want them to display on one row.

Thanks for any answers!

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}

#content1 { 
	margin-left: 50px;
	margin-top: 50px; 
	margin-right: 50px;
	margin-bottom: 50px
	padding-right: 50px; 
 }

 #box1 {
 	text-align: center;
 	margin-top: 8%;
 	margin-bottom: 8%; 
 	margin-left: 2%
 	margin-right: 2%; 
 	padding-left: 15px; 
 	padding-right: 15px;


  }

<div class="section group">


  <div class="col span_2_of_6" id="box1"> 
   <h3>Paid Social</h3>
   <p>We do paid social work for a variety of clients. This is carried out on platforms including Facebook, Twitter, Youtube and LinkedIn. We can use our extensive knowledge of paid social to target audiences across multiple devices.</p> 
  </div>
  
  <div class="col span_2_of_6" id="box1"> 
  <h3>Paid Search</h3>
  <p>We do paid search work for a variey of clients. Using this channel has proven successful for all our of our clients and is key to generate new leads for a business.</p>
  </div>

   <div class="col span_2_of_6" id="box1"> 
   <h3>Analytics</h3>
   <p>We do analytics work for a variety of clients. Analytics is incredibly important when it comes to understanding our paid media efforts and the kinds of actions your audience takes once it has been acquired through these channels.</p>
   </div>

 </div>

Also, you have several elements with same id, you should convert box1 to a class. — Alberto Martinez
– Alberto Martinez, Commented Sep 7, 2017 at 19:38

arbuthnott · Accepted Answer · 2017-09-07 19:33:27Z

It looks like you were careful with your columns and the margins adding up properly. I think the only thing that you are missing is that width does not include the padding or border of an element unless you use box-sizing in your css. Try adding box-sizing: border-box; to your .col class and your content will appear on one row.

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
    box-sizing: border-box;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}

#content1 { 
	margin-left: 50px;
	margin-top: 50px; 
	margin-right: 50px;
	margin-bottom: 50px
	padding-right: 50px; 
 }

 #box1 {
 	text-align: center;
 	margin-top: 8%;
 	margin-bottom: 8%; 
 	margin-left: 2%
 	margin-right: 2%; 
 	padding-left: 15px; 
 	padding-right: 15px;


  }

<div class="section group">


  <div class="col span_2_of_6" id="box1"> 
   <h3>Paid Social</h3>
   <p>We do paid social work for a variety of clients. This is carried out on platforms including Facebook, Twitter, Youtube and LinkedIn. We can use our extensive knowledge of paid social to target audiences across multiple devices.</p> 
  </div>
  
  <div class="col span_2_of_6" id="box1"> 
  <h3>Paid Search</h3>
  <p>We do paid search work for a variey of clients. Using this channel has proven successful for all our of our clients and is key to generate new leads for a business.</p>
  </div>

   <div class="col span_2_of_6" id="box1"> 
   <h3>Analytics</h3>
   <p>We do analytics work for a variety of clients. Analytics is incredibly important when it comes to understanding our paid media efforts and the kinds of actions your audience takes once it has been acquired through these channels.</p>
   </div>

 </div>

SHON WILLIAMS · Accepted Answer · 2017-09-07 19:55:02Z

Please note that this code has been simplfied, but should accomplish what you are wanting...

<style>
.section {
clear: both;
margin: 0px auto;
width: 100%;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0;}


.span_2_of_6 {
width: calc(29.3% - 30px);
position: relative;
float: left;
}


 #box1 {
text-align: center;
display: inline-block;
margin: 8% 2%;
padding: 0% 15px;

  }

</style>

</head>
<body>
<div class="section group">


  <div class="col span_2_of_6" id="box1"> 
   <h3>Paid Social    </h3>
   <p>We do paid social work for a variety of clients. This is carried out on platforms including Facebook, Twitter, Youtube and LinkedIn. We can use our extensive knowledge of paid social to target audiences across multiple devices.    </p> 
  </div>

  <div class="col span_2_of_6" id="box1"> 
  <h3>Paid Search</h3>
  <p>We do paid search work for a variey of clients. Using this channel has proven successful for all our of our clients and is key to generate new leads for a business.</p>
  </div>

   <div class="col span_2_of_6" id="box1"> 
   <h3>Analytics</h3>
   <p>We do analytics work for a variety of clients. Analytics is incredibly important when it comes to understanding our paid media efforts and the kinds of actions your audience takes once it has been acquired through these channels.</p>
   </div>

 </div>

whispernocturn · Accepted Answer · 2017-09-07 21:45:20Z

0

additionally, after fixing this issue you might want to have a look into flexbox (display:flex) which will help you solving layout issues aligning elements in one column (or row). Here's an excellent article

Another layout option: CSS Grid. Still new though.

answered Sep 7, 2017 at 21:45

whispernocturn

1165 bronze badges

Collectives™ on Stack Overflow

html/css displaying content inline

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related