2 column layout with responsive 2nd column?

HTML & CSS
1

Hi,
there is probably an easy way of doing this that i am completely missing but i want a simple 2 column layout. Menu on the left (250px wide) main content on the right taking up whatever available space is there.

It will sit in a wrapper that is centered on the page and is max 1000px wide. so in theory when the screen in big enough the 2nd column will be 750px. What i don’t get at the moment is how to make it responsive so when the screen is less than 1000px wide i want the second column to remain floating to the left but get narrower at the screen gets narrrower. At the moment it just drops below the first column. I can obviously put in loads of media queries and change the layout at certain points but i would prefer it to scale correctly without that.

this is basically what i am doing from the w3schools site. This has a % width though so the first column continues to get smaller as the screen gets narrower. I want it to stay at a fixed size and only the second column get narrower.

how would i do this?

thanks

<style>
* {
    box-sizing: border-box;
}

.row{
        max-width:1000px;
        margin:auto;
            
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

.left {
  width: 25%;
}

.right {
  width: 75%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>
2

Hi,

I wouldn’t use floats these days but to answer your floated question you could just do this:

.left {
  width: 250px;
}
.right {
  width:calc(100% - 250px);
}
3

ah i think i might have found the (an) answer. I’ve used this http://alistapart.com/d/negativemargins/ex4.htm example but swapped the menu to the left. Need to do some testing to make sure it can do what i want it to. Obviously when it gets to a small mobile device i’ll change the layout so it doesn’t just become a stupidly thin column and a wide menu.

anyone see a problem doing it this way?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

.row{
max-width:1000px;
margin:auto;           
}

.left {
height: 300px; /* Should be removed. Only for demonstration */
width: 250px;
float:left;
background:#ccc;
padding:10px;
}

.right {
height: 300px; /* Should be removed. Only for demonstration */
width: 100%;
max-width: 100%;

background:#666;
padding:10px;
padding-left:260px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>


<div class="row">
  <div class="left">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="right">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>
4

If you want the left column to stay fixed at 250px, then set its width to 250px. The right column is not floated so it should automatically take up the rest of the space and be fluid.

At some point you will have to use a media query because the right column will get too narrow.

Okay, ninja’d by faster typing gurus.

3 Likes
5

Without floats you can do this for support back to and including IE8.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.row {
	max-width:1000px;
	margin:auto;
	display:table;
	width:100%;
	height: 300px; /* Should be removed. Only for demonstration */
}
.column {
	padding: 10px;
	display:table-cell;
	vertical-align:top;
	background:#aaa;
}
.left {width: 250px;}
.right {background-color:#bbb;}
</style>
</head>

<body>
<div class="row">
  <div class="column left">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column right">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>
</body>
</html>

Much more robust than floats.

For modern browsers you could use flexbox instead.

1 Like
6

Yes columns will not be equal heights and should you add a clear:both to any element in the right column it will drop below the whole left column. The method described is a fragile method and should not be used in any real layout.

7

cool. that makes sense using display table and is exactly what i was looking to output. I would consider flexbox but i think some of our users could be using quite old browsers so i’d rather stay as backward compatible as i can for now.

thanks both for your help it’s much appreciated.

8

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