Responsive Column Issue

HTML & CSS
1

I have two columns side by side. As i try to decrease the size of the screen, i want the left column to keep its width where as the right column should adhere to the size of the screen. At 600px wide, i want to display the right column on top of left column. Right now, my right column is getting pushed into left column.

This is what i have so far

<section id="content">
            <div class="pageWrapper">
                <div class="contentColumn fontRoboto">
                    <!-- right column -->
                    <section id="rightColumn">
                        <div class="pageTitle drkBlueFont fontRobotoLight">Match Report</div>
                        <asp:ContentPlaceHolder ID="ContentRightColumn" runat="server"></asp:ContentPlaceHolder>
                    </section>
            
                    <!-- left column -->
                    <section id="leftColumn">
                        <asp:ContentPlaceHolder ID="ContentLeftColumn" runat="server"></asp:ContentPlaceHolder>
                    </section>

                    <div class="clearboth"></div>
                </div>
            </div>
        </section>

and css

.pageWrapper { max-width: 980px; margin: 0 auto; }
#content {background-color: #FFF; }
.contentColumn { width: auto;position: relative; padding: 10px;} /*container width 960px*/

#rightColumn {
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 620px;
    width: 620px;
    border-bottom: 1px solid red;
}
#leftColumn {
    padding-left: 20px;
    padding-right: 20px;
    width: 260px;
    /*min-width: 260px;*/
    border-bottom: 1px solid green;
}

@media (max-width: 780px) {
    .contentColumn { padding-top: 0;}
}

@media (max-width: 600px) {
    #rightColumn {
        position: relative;
        float: none;
        display: block;
    }
#leftColumn {
        width: auto;
    }
}

But here is what i have. How can i make the left column to retain its width till 600 px? At 600px, i want it to take the width of the container.

889×63 13.6 KB

3

hmmm, that would be hard to maintain in the long run. I am changing the structure and see where i get with this.

4

Use media queries to check the width and supply the different CSS depending on how wide the viewport is. The following should do what you want by substituting 100% width for both columns when the viewport goes under 620px.

#rightColumn {
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 620px;
    width: 620px;
    border-bottom: 1px solid red;
}
#leftColumn {
    padding-left: 20px;
    padding-right: 20px;
    width: 260px;
    /*min-width: 260px;*/
    border-bottom: 1px solid green;
}

@media (max-width: 620px) {
    #leftColumn, #rightColumn { 
    width: 100%; 
    }
 }
5

Here’s a way to do what you described initially:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.content {overflow: hidden; position: relative; max-width: 960px; margin: 0 auto;}

.rightColumn {margin-left: 280px; background: #f7f7f7;}
.leftColumn {position: absolute; left: 0; top: 0; background: #30353b; color: white; width: 260px;}

.rightColumn, .leftColumn {min-height: 200px;}

@media screen and (max-width: 600px) {
.rightColumn {margin-left: 0; background: #f7f7f7;}
.leftColumn {position: static; background: #30353b; color: white; width: 100%;}
}

</style>
</head>
<body>

<section class="content">
    <section class="rightColumn">
        <div>Right Column</div>
    </section>

    <section class="leftColumn">
        <div>Left Column</div>
    </section>
</section>

</body>
</html>
1 Like
6

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