Possibly impossible layout

HTML & CSS
1

I’m looking for a three column fluid layout as follows
sidebar[20%] - main-content[60%] - sidebar[20%]
Which in itself is very simple, however I want to specify a max-width on the two sidebars, yet allow the main-content to continue stretching.
I’ve had various attempts, but as yet no success.
Can anyone point me in the direction of a solution?

2

You could use @media queries to switch styles from percentages to fixed widths at a different resolutions.


.aside { width: 20% }
@media only screen and (max-device-width: 480px) {
  .aside { width: 100%; float: none}
}
@media only screen and (max-width:1024px) {
  .aside { width: 300px }
}

overflow: hidden; on the content can also achieve what you want. Something about the overflow property makes an elements margins but up against those around it. In the case of floats either side it will make the content always fit between them.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>I &#9829; HTML</title>
<style>

.aside {
	float: left;
	width: 20%;
	max-width: 200px;
	background: red
}
.aside.right { float: right }
.aside p {
	padding: 20px;
	margin: 0
}
#content {
	overflow: hidden;
	padding: 20px;
	background: green
}

</style>
</head>
<body>

<div class="aside right">
	<p>Content</p>
</div>
<div class="aside">
	<p>Content</p>
</div>
<div id="content">
	<p>Content</p>
</div>

</body>
</html>
3

This would be a far simple solution:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
		#cont { width:80%; margin:0 auto; /*this is optional, I just wanted to make the layout pretty by centering the layout and giving it breathing room*/}
			#sidebar1,#sidebar2{width:20%; max-width: 250px}
			#sidebar1 {float:left; background: orange}
			#sidebar2 {float:right; background: silver}
			#main{overflow: hidden; background: pink}
		</style>
	</head>
	<body>
		<div id="cont">
		<div id="sidebar1">sidebar1</div>
		<div id="sidebar2">sidebar2</div>
		<div id="main">this is content</div>
		</div>
	</body>
</html>

:slight_smile:

4

You can also Holy Grail it, if you need the middle to be first in source.

So long as you don’t float or display: inline-block the middle part, it’ll grow with the page as needed.

5

Thanks to Dresdon it’s sorted, all I was missing was the overflow: hidden.
Thanks to everyone else for assisting too.

6

Just out of curiosity, may I ask if there is content in the sidebars or is it just a placeholder for a background image?

7

There will be content in both sidebars, why do you ask?

8

There’s techniques to have images show up on the sides of a single-column main-page content, which if that’s what you needed, could semantically be better. Or, if they only hold ads and the such, they’re content but you wouldn’t necessarily want that content to be the first thing in source code after your header content.

9

What Stomme poes said was what I was getting at. If there is no content—and a background image is not content—then there would be a better way. I have a serious aversion to empty DIVs or any so-called placeholder tags.

The reason I asked was when this question comes up 90% of the time the sidebars are just there to keep the actual content from allowing the background image to show through. :slight_smile: Carry on.