Link to home
Start Free TrialLog in
Avatar of ctangent
ctangent

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

Avatar of LZ1
LZ1
Flag of United States of America image

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

Avatar of ctangent
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
Avatar of stehardy88
stehardy88
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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

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

Just set the height to 100% like the right one is.  
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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%.