CODEWITHSUNDEEP
csscss-float
Daniel Moss
Daniel Moss

Reputation: 567

Why is text pushed down after a float: left block?

I have a structure of an image that's floated to the left and another block that should follow it horizontally to the right. It does, except for when the length of the text of that block gets bigger. Then stuff gets messy.

Here's my structure:

post-big-then-small-2-smaller {
  height: 100%;
  overflow: hidden;
  width: 100%;
  margin-top: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}
    
.post-big-then-small-2-smaller .post-thumbnail img {
  height: 90px;
  width: 40%;
  object-fit: cover;
  position: relative;
  float: left;
  margin-right: 10px;
}
    
    .post-big-then-small-2-smaller .entry-header .entry-title {
  margin: 0 0 6px 0;
}

.post-big-then-small-2-smaller .entry-header .entry-title a {
  white-space: nowrap;
  color: #1e1e1e;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
}
    
.post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 10px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: #3a3a3a;
  opacity: 0.5;
}
<article class="post-big-then-small-2-smaller">
      <div class="post-thumbnail">
          <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
      </div>
      <header class="entry-header">
          <div class="entry-meta">
              <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
              <a href="http://www.google.com" rel="bookmark">
                  <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
              </a>
      </header>
  </article>

What I am experiencing:

enter image description here

Any ideas as to why?

Upvotes: 0

Views: 684

Answers (2)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Avoid applying CSS styling to child elements, instead, apply the CSS styling to .post-thumbnail & .entry-header. Also remove white-space: nowrap from the title (it has no use).

In your case apply CSS properties (float, height, etc.) to .post-thumbnail instead of .post-thumbnail img

Example:

.post-big-then-small-2-smaller .post-thumbnail {
  width: 40%;
  float: left;
  margin-right: 10px;
}

Have a look at the snippet below:

.post-big-then-small-2-smaller {
    height: 100%;
    overflow: hidden;
    width: 100%;
    margin-top: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}

.post-big-then-small-2-smaller .post-thumbnail {
  width: 40%;
  float: left;
  margin-right: 10px;
}

.post-big-then-small-2-smaller .post-thumbnail img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    position: relative;
}

.post-big-then-small-2-smaller .entry-header .entry-title {
    margin: 0 0 6px 0;
}
.post-big-then-small-2-smaller .entry-header .entry-title a {
    color: #1e1e1e;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
}

.post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 10px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: #3a3a3a;
    opacity: 0.5;
}
<article class="post-big-then-small-2-smaller">
      <div class="post-thumbnail">
          <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
      </div>
      <header class="entry-header">
          <div class="entry-meta">
              <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus</a></h3>
              <a href="http://www.google.com" rel="bookmark">
                  <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
              </a>
      </header>
  </article>

Hope this helps!

Upvotes: 1

M0ns1f
M0ns1f

Reputation: 2725

The display property specifies the type of box used for an HTML element. for your case you can use display:inline-block :

 .post-thumbnail {
width: 50%;
display: inline-block;
float: left;
}
 header.entry-header {
width: 50%;
float: right;
text-align: left;
}

Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

then you set where the inside element you want to float :

post-big-then-small-2-smaller {
        height: 100%;
        overflow: hidden;
        width: 100%;
        margin-top: 24px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e5e5;
    }
    
.post-big-then-small-2-smaller .post-thumbnail img {
    height: 90px;
    width: 40%;
    object-fit: cover;
    float: right;
    position: relative;
    margin-right: 10px;
}
    
    .post-big-then-small-2-smaller .entry-header .entry-title {
        margin: 0 0 6px 0;
    }
    .post-big-then-small-2-smaller .entry-header .entry-title a {
        white-space: nowrap;
        color: #1e1e1e;
        font-family: 'Playfair Display', serif;
        font-size: 20px;
    }
    
    .post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published {
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 10px;
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        color: #3a3a3a;
        opacity: 0.5;
    }
article.post-big-then-small-2-smaller {
    display: inline-block;
    max-width: fit-content;
    width: 100%;
    text-align: center;
}

.post-thumbnail {
    width: 50%;
    display: inline-block;
    float: left;
}
header.entry-header {
    width: 50%;
    float: right;
    text-align: left;
}
.text{width:100%;display:inline-block;max-width:75%;margin:auto}
<article class="post-big-then-small-2-smaller">
                    <div class="post-thumbnail">
                        <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
                    </div>
                    <header class="entry-header">
                        <div class="entry-meta">
                            <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
                            <a href="http://www.google.com" rel="bookmark">
                                <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
                            </a>
                </div>
</header>
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div>
  </article>
<article class="post-big-then-small-2-smaller">
                    <div class="post-thumbnail">
                        <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
                    </div>
                    <header class="entry-header">
                        <div class="entry-meta">
                            <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
                            <a href="http://www.google.com" rel="bookmark">
                                <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
                            </a>
                </div>
</header>
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div>
  </article>
<article class="post-big-then-small-2-smaller">
                    <div class="post-thumbnail">
                        <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
                    </div>
                    <header class="entry-header">
                        <div class="entry-meta">
                            <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
                            <a href="http://www.google.com" rel="bookmark">
                                <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
                            </a>
                </div>
</header>
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div>
  </article>

Upvotes: 0

Related Questions