3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Responsive Full width 2 columns with the same height.

by Go4DBest
2 replies
Greetings everyone,

I really need your help with the correct css and html codes.

I have a full width site with a 2 column layout. Both sides (left section and right section) are using background images. I need them to have the same height. The left section has more contents than the right section. The challenging part is it should be responsive.

I want to copy the style of this website, Rewarding Reviews Club It's responsive and the heights of the columns are equal.

I did lots of research but no luck yet. I found this one, 2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS , it's quite responsive but the problem is when it is viewed on smaller screens, the right section won't move down below of the left section. Well, if it's too hard to get that then maybe I can use this style for now.

I hope you can help me or at least offers some advice and tips.

Thanks for at least reading my thread.

Thanks,
G.B
#columns #full #height #responsive #width
  • Profile picture of the author magiclouie
    Hi there,

    Try these codes: (Just clean the codes afterwards because I used inline CSS which are not advisable.)

    CSS:

    /* Start of Column CSS */

    #first_row_container_left {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
    background-image:url("http://site.com/green-bubbles.jpg ");
    background-repeat:repeat;
    }

    #first_row_container_right {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#4fa2a9; /* column 2 background colour */
    background-image:url("http://site.com/right-image4.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
    color:#FFF;
    }

    #col_left {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
    }
    #col_right {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
    }
    HTML


    <!------------------------------------------->
    <!-------------- first row ------------------->
    <!------------------------------------------->
    <div id="first_row_container_right">
    <div id="first_row_container_left">

    <div id="col_left" style="padding-top:120px; padding-left:10px; padding-right:60px; padding-bottom:120px;" >

    <!-- Column left start -->


    <p>TEST AMAZING PRODUCTS</p>
    <br />


    <p>Our clients are constantly bringing innovative products to market, and our chosen marketplace is Amazon.com. Naturally they want to know your thoughts first! You'll have the opportunity to give your unbiased opinion, keep the product that you test, and better yet you'll support some amazing charities. </p>



    <!-- Column left end -->
    </div>
    <div id="col_right" style="padding-top:150px;">


    <!-- Column right start -->

    <p>Now Available On: </p>

    <p style="text-align:center"><img style="margin-left:-15px;" src="http://site.com/amazon-logo-4006.png" width="400" height="146" /></p>


    <!-- Column right end -->
    </div>
    </div>
    </div>

    <!------------------ end of first row --------------------->

    <div style="clear:both"></div>
    Break a leg.

    Cheers,
    Louie Tugas
    {{ DiscussionBoard.errors[9785250].message }}
  • Profile picture of the author Go4DBest
    Thanks a lot. Your codes work. You are dope.
    Signature
    We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
    {{ DiscussionBoard.errors[9805190].message }}

Trending Topics