ad placement on both sides of webpage

Question

I've been looking on how to do this for months and months. I've got a better example as I did before. What I'm trying to do is place 2 advertisement boxes on each side of the webpage. I'll show an example of exactly how I want this:

This is how I want it:

ads on both sides

This is my website download page right now:

where i want the advertisements on my site

Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Please look at guide [how do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Andrzej Ziółek, Jul 02 '18 at 16:58
You have spent months trying to build a [three column layout](https://stackoverflow.com/questions/20566660/3-column-layout-html-css)? I think you might be over thinking the problem. — Turnip, Jul 02 '18 at 17:05
@Abdenn0ur Download thousands of lines of code to achieve something that could be done in ~10? — Turnip, Jul 02 '18 at 17:07
Well, for me the bootstrap css framework is beast ! it's worth using it for the grid system. i'll leave what could be done in an answer — AraByte, Jul 02 '18 at 17:49

score 0 · Answer 1 · answered Jul 02 '18 at 17:55

0

Using the Bootstrap framework will open endless possibilities on how to display your divs and containers, plus, it's responsive and works great with almost every device out there !
Check Here to learn more about BS

what you want to achieve can be easily done with the following :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-sm-3">
    <center>Ad Here ! </center>
    </div>
    <div class="col-sm-6">
    <center>Main Content </center>
    </div>
    <div class="col-sm-3">
     <center>Ad Here ! </center>
    </div>
  </div>
</div>

</body>
</html>

answered Jul 02 '18 at 17:55

AraByte

154
9

Thanks so much it's sort of worked but the webpage width is now messed up take a look here: https://www.myupload.cc/se how do I fix that? – Ben O'Reilly Jul 02 '18 at 18:28
Play with the numbers, the sum of the grids must be 12, let's say for example you make the sides 2 and the center 8 or the sides 1 and the center 10. – AraByte Jul 02 '18 at 18:30
Also, you can make the box where you put the files details to span all over the column by making it's width:100% – AraByte Jul 02 '18 at 18:32
How do I make the width of the file details box 100%? – Ben O'Reilly Jul 02 '18 at 18:37
Add : style="width:100%;left:0" to download-table-1 (in css stylesheet or as shown in screenshot), don't forget to put that row (the ads and details box) inside a container, if you don't the details box will break through other columns : https://image.ibb.co/cTxi2J/Untitled.png – AraByte Jul 02 '18 at 18:45
It's still messing up the footer links. I can't understand why it's squeezing the footer? – Ben O'Reilly Jul 02 '18 at 19:26
Have you closed the container div ? – AraByte Jul 02 '18 at 19:32
Oh, i told you that the row can take up to 12 column, the footer links divs are like col-sm-15 and that's not possible, probably it should be col-sm-3 as there are 5 sections of footer links – AraByte Jul 02 '18 at 19:36
So what should I do? change the footer to sol-sm-5? – Ben O'Reilly Jul 02 '18 at 19:56
It should be : sol-sm-3 for all 5 sections – AraByte Jul 02 '18 at 19:57

ad placement on both sides of webpage

1 Answers1