Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by ezekielenejeta
ezekielenejeta
2,665 Points

How do i create an ad container using html and css

Hello house, kindly assist me i want to create three ad containers just below my navigation. pls how best should i write it using html and css. below is my code:

html <span class="ad-container"> <div class="first-ad"><p>advertise here</p></div> <div class="second-ad"><p>advertise here</p></div> <div class="third-ad"><p>advertise here</p></div> </span>

css

.first-ad{ border: 1px solid black; }

.second-ad{ border: 1px solid black; }

.third-ad{ border: 1px solid black; }

.ad-container{ display: inline-flex; line-height: 100px;

Jeff Lemay
Jeff Lemay
14,268 Points

Could you show us what you attempted so far?

1 Answer

Placid Rodrigues
Placid Rodrigues
12,630 Points
Placid Rodrigues
Placid Rodrigues
12,630 Points

Hi Ezekiel Enejeta,

You can use the following for your requirement:

HTML:

<div class="ad-container">
  <div class="ad">First Ad Here</div>
  <div class="ad">Second Ad Here</div>
  <div class="ad">Third Ad Here</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
.ad-container {
  width: 100%;
}
.ad {
  border: 1px solid black;
  width: 32.2%; /*Adjust as necessary*/
  margin: .3%;
  float: left;
  /*Add min-height or max-height as necessary*/
}

.ad-container:after {
  display: table;
  content: "";
  clear: both;
}

Also, I think you need to learn more of HTML and CSS.

Hope that helps.

Placid