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 Serhiy Hryva
Serhiy Hryva
2,026 Points

Help with positioning of DIV's.

Hey there.

I am trying to create calendar like cards, with date, time, title, subtitle, image and description.

Time, date and image should be to the left (lets say 25%), while title, subtitle and description to the left.

I've tried floating, but, especiallt description, doesn't seem to work well..

Please advise.

HTML

<div class="sewpro-classes-holder">

<div class="sewpro-classes">

<div class="classes-date">
<div class="classes-date-month">JUN</div>
<div class="classes-date-day">25</div>
</div>

<div class="classes-time">10:00AM-12:00PM</div>

<div class="classes-title">Kids Sewing Class</div>

<div class="classes-subtitle">Summer Sewing: bag for your towel, lightweight wallet, summer shorts or pj shorts, car caddy for road trips</div>

<div class="classes-img">
<a href="http://sewprocapecod.com/rebuild/wp-content/uploads/2016/06/kids-beginner-sewing.jpg" alt="Kids Sewing Class"><img src="http://sewprocapecod.com/rebuild/wp-content/uploads/2016/06/kids-beginner-sewing.jpg" alt="Kids Sewing Class"></a>
</div>

<div class="classes-descr">New projects for the summer: tee shirt dress, beach tote bag, pj shorts, shorts, car caddy for summer road trips. New projects added each week.</div>
<div class="classes-descr">
Never sewn before? Call us and we can schedule an individual lesson so you can join the group.</div>
<div class="classes-descr">
Machine rental available</div>

</div>
</div>

CSS

.sewpro-classes-holder {
text-align: center;
}

.sewpro-classes {
float: left;
width: 100%;
margin: 0 0 1%;
text-align: center;
border-radius: 3px;
color: #fff;
font-size: 15px;
line-height: 150%;
border-top: 3px solid #f4c113;
border-bottom: 3px solid #bbbbbb;
}

.sewpro-classes {
background-color: #28527c;
}

.sewpro-classes img {
width: 25%;
float: left;
clear: both;
border-radius: 0 !important;
vertical-align: bottom;
}

.sewpro-classes p {
margin: 5px 0 !important;
}

.classes-date {
width: 25%;
float: left;
text-align: center;
color: #fff;
font-family: 'Alegreya Sans', sans-serif;
padding: 5px 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}

.classes-date {
background-color: #2d5c8a;
}

.classes-date-month {
font-size: 24px;
line-height: 100%;
}

.classes-date-day {
font-size: 40px;
font-weight: bold;
line-height: 100%;
}

.classes-title,
.classes-title-d {
font-size: 28px;
line-height: 44px;
}

.classes-title {
background: #1f4060;
}

.classes-subtitle {
font-size: 18px;
line-height: 20px;
}

.classes-title,
.classes-title-d,
.classes-subtitle {
padding: 2px 5px;
}

.classes-time {
width: 25%;
float: left;
clear: both;
overflow: auto;
font-size: 20px;
line-height: 30px;
}

.classes-time {
background-color: #5a5555 !important;
}

.classes-descr {
float: left;
width: 73%;
padding: 0 1% 0.3%;
text-align: left;
}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

I've just put your code in a codepen and it seems to work fine for me. What is it in particular you're struggling with? :-)

If it's the text lagging onto the left of the card below the image try 

.classes-descr {
    float: right;
    width: 73%;
    padding: 0 1% 0.3%;
    text-align: left;
}

Which will stop this and float the container to the right.

Rememver you can also use media queries to further refine how the card appears at various browser widths and stop the layouts breaking. a.k.a breakpoints. Good luck. :-)

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I'm not sure what you're going for — it looks pretty good now.

But here's some general suggestions:

  • floats are difficult to work with, you might consider a layout that uses container elements for columns.
  • you might take that idea a step further and make use of flexbox layout
  • !important is almost never necessary (yours don't seem to be) and often a band-aid covering poor initial design
Serhiy Hryva
Serhiy Hryva
2,026 Points

I agree. I have got to return to classes to further polish and improve.

Serhiy Hryva
Serhiy Hryva
2,026 Points
Serhiy Hryva
Serhiy Hryva
2,026 Points

When there's more text than the height of the image, text slides under the image. I was wondering, if it could be kept within same box - not intruding into the date/time/image column?