asked on

How do I have three divs on the same line with no new lines using only CSS?

I have a simple HTML page with three divs.
I want these three blocks to be on the same line with no newlines when the user goes to resize the browser. Is this possible in CSS?

The only way I know how to do this is with tables.

I also want to be able to have div1 and div3 be "fixed widths" but the second one to fill up the available space.

<div id="div1">
<p><span>Title</span></p>
<p>Text</p>
</div>
 
<div id="div2">
<p><span>Text</span></p>
<p>MoreText</p>
</div>
 
<div id="div3">
<p>Text and image</p>
</div>

Open in new window

LZ1

Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>3-col layout via CSS</title>
	
<style type="text/css">
/* <![CDATA[ */
 
	body {
		margin:0; padding:0;
		font:11pt/1.5 sans-serif;
		}
 
	#header {
		margin:0; padding:0;
		background:yellow;
		}
 
	#main1 {
		margin:0; padding:0;
		background:yellow url("red.gif") top left repeat-y;
		}
	#main2 {
		margin:0; padding:0;
		background:url("blue.gif") top right repeat-y;
		}
	#left {
		float:left;
		width:150px;
		margin:0; padding:0;
		background:url("corner.gif") top right no-repeat;
		font-size:80%;
		}
	#right {
		float:right;
		width:150px;
		margin:0; padding:0;
		background:url("corner.gif") top right no-repeat;
		font-size:80%;
		}
	#middle {
		margin:0 150px;
		font-size:80%;
		}
	.column-in {
		margin:0; padding:0.5em 1em;
		}
	.cleaner {
		clear:both;
		height:1px;
		font-size:1px;
		border:none;
		margin:0; padding:0;
		background:transparent;
		}
		
	h1,h2,h3,h4 { margin: 0.2em 0 }
	p { margin: 0.5em 0 }
	a { color:black }
	
	.copy { text-align:center; font-size:80% }
 
/* ]]> */
</style>
 
</head>
<body>
<div id="main1"><div id="main2">
 
	<div id="left"><div class="column-in">
		<h4>Left Col</h4>
		<p id="lccont">&nbsp;</p>
	</div></div>
 
	<div id="right">
    <div class="column-in">
		<h4>Right Col</h4>
		<p id="rccont">&nbsp;</p>
	</div></div>
 
	<div id="middle"><div class="column-in">
		<h4>Middle Col</h4>
	</div></div>
 
	<div class="cleaner">&nbsp;</div>
 
</div></div>
<hr />
<p class="copy">&nbsp;</p>
</body>
</html>

Open in new window

ctangent

ASKER

Yes that is great.
Except in my case the first column and the second will have variable text.
So the first column, hardcoding the width might not work...

SOLUTION

stehardy88

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ctangent

ASKER

Data is variable meaning for example it would be created with php from a database. So I won't know at run time what the width of the div1 is.

LZ1

How about this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
	
<style type="text/css">	
#left {
	float:left;
	width:20%;
	margin:0;
	padding:0;
	font-size:80%;
	clip: rect(auto,auto,auto,auto);
	display: inline;
	color: #FFF;
	background-color: #00F;
		}
	#middle {
	font-size:80%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-right: 20%;
	padding-left: 20%;
	color: #F00;
	background-color: #000;
		}
#right {
	float:right;
	width:20%;
	margin:0;
	padding:0;
	font-size:80%;
	clip: rect(auto,auto,auto,auto);
	display: inline;
	color: #FF0;
	background-color: #F00;
	height: 100%;
}
	
</style>
 
</head>
<body>
 
<div id="left">
  <h4>Left Col</h4>
		fsdfasdfasdfsdfasdfasdfsdfasdfasdfs fsdfasdfasd
	fsdfasdfasdfsdfasdfasdfsdfasdfasdfsfsdfasdfasdfsdfasdfasdfsdfasdfasdfs</div></div>
 
  <div id="right">
    
	<h4>Right Col</h4>
	  <p>fsdfasdfasdfsdfasdfab sdfsdfasdfasdfsfsdfasdfasdf sdfasdfasdfsdfasdfasdfsfsdfasd fasdfsdfasdfasdfsdfasdfasdfsfsdfasdfa sdfsdfasdfasdfsdfasdfasdfsfsdfasdfas dfsdfasdfasdfsdfasdfasdfs</p>
</div></div>
 
<div id="middle">
  <h4>Middle Col</h4>
		<p>fsdfasdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasd</p>
</div>  
</body>
</html>

Open in new window

ctangent

ASKER

Close, except for the first section now increases and decreases in size.

See this statement from the question above
"I also want to be able to have div1 and div3 be "fixed widths" but the second one to fill up the available space."

LZ1

Just set the height to 100% like the right one is.

ASKER CERTIFIED SOLUTION

LZ1

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ctangent

ASKER

With the example given if I make the browser window small the width of the blue (1st column) gets smaller. I want this to be fixed.

If it is easier to use JS to dynamically set the width at load time I'm up for that too.
0313-col1.png
0313-col2.png

jasemhi

How can you make a fixed width if you don't know what that width will be? You can "fix" it by setting the left and right columns as a percentage (actually considered liquid), but they will shrink when the browser window is resized because 20% of a smaller window is smaller but still 20%.