ctangent

asked on 3/13/2009

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

Web Languages and StandardsHTMLCSS

Last Comment

jasemhi

8/22/2022 - Mon

LZ1

3/13/2009

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

3/13/2009

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

3/13/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

ctangent

3/13/2009

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.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

LZ1

3/13/2009

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

3/13/2009

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

3/13/2009

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

ASKER CERTIFIED SOLUTION

LZ1

3/13/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

ctangent

3/13/2009

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

3/13/2009

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%.