A Simple Fluid-Fixed Layout

The illusive fluid-fixed layout has the following properties:

  • One column that expands to fill the screen
  • A second column that has a fixed width to the right of the expanding column

I rarely remember the CSS syntax to do this, so I’m posting it here both as a reference for myself as well as for anyone else looking for a solution.



	<title>Fixed-Fluid Example</title>
	<style type="text/css">

		body {
			color: white;

		#wrapper {
			float: left;
			width: 100%;

		#fluid {
			background-color: #336699;
			margin-right: 200px;

		#right-col {
			background-color: #bd2115;
			width: 200px;
			float: right;
			margin-left: -100%;

		.padded-content {
			padding: 5px;

	<div id="wrapper">
		<div id="fluid">
			<div class="padded-content">Fluid</div>
	<div id="right-col">
		<div class="padded-content">Fixed at 200px</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s