CODEWITHSUNDEEP
htmlcsscss-float
chris b
chris b

Reputation: 64

Body of html document is not extending past a div unless i remove floating property of the div(s)

I am trying to set the layout of my page into three section by floating each of the section left according to the device width with the help of media queries in my css. I have succeeded in doing so although when I try to inspect the page using chrome developer tool I can confirm my body is not spanning across the section(s). On removing the float property from the media queries the body element is spanning as desired though my layout would not be designed as desired as all section are in a block which is not desired. Is there an explanation for the behavior or how would the problem be corrected? Below is a link of the jsfiddle page for the page https://jsfiddle.net/nma71c4w/. Thank you as you help me in the problem.

<div class="col-lg-4 col-md-6 col-sm-12">
    <section>
       <div class="hidden-element">
            <h2 ></h2>
        </div>

        <div class="title-element">
            <h2 > Chicken</h2>
        </div>
        <div>
            <p>
             my contents
            </p>
        </div>
    </section>
</div>

The css style causing the error is around media queries like.

@media (min-width: 992px){
        .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col- 
         lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
            float: left;
                                   
        }
        ....
}

Upvotes: 0

Views: 44

Answers (2)

Johannes
Johannes

Reputation: 67778

You can apply overflow: hidden; to the container of those floated elements (in your case the body?) in order to make it wrap all floated children which it contains. This seems like a strange thing, but it's a common way to solve that problem.

Upvotes: 1

Birol Yılmaz
Birol Yılmaz

Reputation: 129

Instead of media query you can use grid property in css.

<div class="main">

       <div>
            <h2 ></h2>
        </div>

        <div>
            <h2 > Chicken</h2>
        </div>
        <div>
            <p>
             my contents
            </p>
        </div>
   
</div>

css:

.main{
display:grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

That should solve your problem. If you dont understand what grid is, I recommend you to watch these : https://youtu.be/t6CBKf8K_Ac

It is more powerful and useful.

Upvotes: 0

Related Questions