Making a box module thing with CSS and HTML

Question

I want to make a box template to put events in. Here is an example png of me editing a sites html (and looks like I want it to):

.course{
  display: inline-block;
  background-color: #eeeeee;
  width: 100%;
}
img {
  width: 15%;
  height: auto;
  vertical-align: middle;
   float: left;
}
.course-header{
  text-align: center;
  position: relative;
  float: right;
  margin-right: z
}
.course-brief{
  text-align: center;
  position: relative;
  float: right;
}
.course-date{
  text-align: center;
  position: relative;
  float: right;
}

</div>
  <div class="course">
        <!--- should be centered :( --->
        <h3 class="course-header">Course Heading</h3>
        <!--- should be underneath title :( :( --->
        <h5 class="course-brief">Brief description</h5>
        <!--- should be on the side :[ --->
        <h4 class="course-date">Date</h4>
        <!--- sadness :( --->
        <img src="https://media2.giphy.com/media/Ph0kgTa6RfKibF8qDT/200.gif" class="course-image"></img>
</div>

However, I can't get the text to look good (my previous problem was that the image wasn't on the side of the text, now it's that the text didnt work).

I took the event example from general assembly. Comment if you need any more information. Thanks

MahmouD Skafi · Accepted Answer · 2020-12-27 18:02:28Z

you can achieve that by using flex-box, my advice don't use float because you need to do a lot of code to make it work, you can look at this article to learn flex-box.

.course {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eeeeee;
  width: 100%;
}
.course__header {
  display: flex;
  align-items: center;
}
.course__header img {
  width: 30%;
  height: auto;
  vertical-align: middle;
}

  <div class="course">
         <div class="course__header">
           <img src="https://media2.giphy.com/media/Ph0kgTa6RfKibF8qDT/200.gif" class="course-image"></img>
            <div class="course__info">
                <h3 class="course-header">Course Heading</h3>
                <h5 class="course-brief">Brief description</h5>
            </div>
         </div>
           <h4 class="course-date">Date</h4>


</div>

see changing HTML structure and use flex-box easier than using float and more cleaner.

Lundstromski · Accepted Answer · 2020-12-27 17:47:14Z

This can be solved with multiple solutions and since you already had used float I figured that I would use that to.

I solved this by removing float: left on the title and description and by rearranging the HTML, since we are using float.

.course{
  display: inline-block;
  background-color: #eeeeee;
  width: 100%;
}
img {
  width: 15%;
  height: auto;
  vertical-align: middle;
  float: left;
}
.course-header{
  position: relative;
  
}
.course-brief{
  position: relative;
}
.course-date{
  text-align: center;
  position: relative;
  float: right;
}

</div>
  <div class="course">
        <img src="https://media2.giphy.com/media/Ph0kgTa6RfKibF8qDT/200.gif" class="course-image"></img>
        <h4 class="course-date">Date</h4>
        <h3 class="course-header">Course Heading</h3>
        <h5 class="course-brief">Brief description</h5>
</div>

Kimura Shinji · Accepted Answer · 2020-12-27 17:55:06Z

I think you meant this.

<div class="course">
    <img src="https://media2.giphy.com/media/Ph0kgTa6RfKibF8qDT/200.gif" class="course-image">
    <div class="course-content">
        <!--- should be centered :( --->
        <h3 class="course-header">Course Heading</h3>
        <!--- should be underneath title :( :( --->
        <h5 class="course-brief">Brief description</h5>
      </div>
        <!--- should be on the side :[ --->
        <h4 class="course-date">Date</h4>        
</div>


.course{
  display: inline-block;
  background-color: #eeeeee;
  width: 100%;
  display: flex;
  align-items: center;
}
.course-img {
  width: 15%;
  height: auto;
  vertical-align: middle;
   float: left;
}
.course-content {
  width: 100%;
  text-align: center;
}
.course-header{
  text-align: center;
  position: relative;
}
.course-brief{
  text-align: center;
  position: relative;
}
.course-date{
  text-align: center;
  position: relative;
  float: right;
}

Collectives™ on Stack Overflow

Making a box module thing with CSS and HTML

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