My section is inheriting clear both from a previous declaration

@media only screen and (max-width: 1028px) (desktop)

(pic1)

section-one, section-two, section-three {
clear: both;
background-color: #ececec;
margin-left: 13em;
width: 22.7%;
float: left;
margin-top: 2em;
border: 1px solid #a2a2a2;
}

I am using media queries and a 3 column layout becomes 2 as the browsers width decreases.

To explain further i have 3 sections side by side. On each row is 3 sections. (pic1)

When i try to use this code on the 2 column layout a gap appears next to the section 3. (pic2). From using firebug i can see that the clear both is being inherited from the above css which was used on the previous screen size media query. As soon as i remove this rule the space is filled with section 4 which is the desired result.

(pic2)

Is there anyway i can stop this from happening… If i take away the clear property from the css (screen size below) it makes the layout even worse throughout the range of screen sizes.

@media only screen and (max-width: 687px){

section-three {
float:right;
width: 46%;
margin-left: 3.0269058295964126%; /* 27 / 892 */
margin-bottom: 10px;
}

Thanks in advance for your help i have taken photos but im not sure how to upload them.

Regards G

Would be more helpful if you would post a working page so we can see what you see.

When i used code pen it was to complicated so these pictures should hopefully make everything clearer.

The screen shots are nice, but we still need to see the code. You can drag and drop a working file into a post, but it needs to be complete… HTML and CSS. If you have a site where the page is hosted, a link to that site would be OK.

Ok my apologies. SECTION 4 i would like to fill the available space but its inheriting the clear both from the previous declaration.

If you resize the screen to 687px this is when the problem occurs…

Regards G

The HTML validator says that the button element should not be inside an <a> pair.
I suggest that you use inline-blocks instead of floats.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/my-section-is-inheriting-clear-both-from-a-previous-declaration/194218
Jun 26, 11:22 AM
MrG
Giles Hughes
http://codepen.io/ghughes77/pen/LVeGQL
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*, *:before, *:after {
    box-sizing:inherit;
}
body {
    margin:0;
}
.tours {
    display:table;
    width:100%;
    word-spacing:-.5em;
    text-align:center;
}
section {
    display:inline-block;
    vertical-align:top;
    width:30.5%;
    word-spacing:0;
    text-align:left;
    border:1px solid #a2a2a2;
    background-color:#ececec;
    margin:.5em 1%;
}
@media only screen and (max-width:687px) {
    section {
        width:46.5%;
    }
}
    </style>
</head>
<body>
<div class="tours"> 
    <section class="one">
        <h2>section1</h2>
        <img src="img/section1.jpg" width="380" height="179" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque corporis animi, assumenda beatae tempora lauda...</p>        
    </section> 
    <section class="two">
        <h2>section2</h2>
        <img src="img/section2.jpg" width="380" height="179" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque corporis animi, assumenda beatae tempora lauda...</p>
    </section> <!-- endTanah-lot --> 
    <section class="three">
        <h2>section3</h2>
        <img src="img/ubudartist.jpg" width="380" height="179" alt="Artists Carving">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque corporis animi, assumenda beatae tempora lauda...</p>
    </section> <!-- endartistTour  -->
    <section class="four">
        <h2>section4</h2>
        <img src="img/praying.jpg" width="380" height="179" alt="East Of Bali Tour">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque corporis animi, assumenda beatae tempora lauda..</p>
    </section> <!-- East Of Bali Tour --> 
    <section class="five">
        <h2>section5</h2>
        <img src="img/rafting.jpg" width="380" height="179" alt="Rafting">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque corporis animi, assumenda beatae tempora lauda...</p>
    </section> <!-- endrafting  -->
    <section class="six">
        <h2>section6</h2>
        <img src="img/offering.jpg" width="380" height="179" alt="Balinese Offering">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque corporis animi, assumenda beatae tempora lauda..</p>
        <a href="traditionalbali.html"><button class="info">More info</button></a>
        <a href="booking.html" title="booking"><button class="booking-index">Book Now</button></a>
    </section> <!-- endtraditional  -->
</div>
</body>
</html>
1 Like

I second Ron’s method and you may also want to control that image.

e.g.

.tours img {max-width:100%;height:auto;}
2 Likes

Thanks very much again Ron. Ill try the new method you laid out. So i would have been going round in circles with the attempt i posted i presume…

Let us know how it works for you.

Yes, because you would have needed to set clear:none in the media queries for section 4 but then a;so n the same media queries add clear:both to sections 3 and 5 and at the same time cancel out the margins that you had on section 4 and add them to 3 and 5t.

Ron’s version is much simpler and more robust.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.