3 column html layout that stretches to the size of the content

**roberttonafelix** · Nov 1 '12, 06:00 AM

Go through this below link it will be helpful for u...

http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/

**Baaliefiy** · Nov 1 '12, 09:16 AM

Thanks for the response and the link, but the 3 column layout isn't the problem I can do that. As stated in my post I want the left and right column to contain a picture that increases in size based on the amount of text in the centre column, that's what I'm having trouble with.

**Frinavale** · Nov 1 '12, 03:41 PM

I used the position:absolu te style to achieve this.

To play with the code that I used check out this.

To see the full screen result of the code I used see this.

Here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
<head>
    <title>3 column layout with pictures - HTML / CSS</title>

<style>
	html {
	  background: #333333;
	}

	p{
          padding:5px;
        }

	#wrapper{
           position:absolute; 
           width: 50%;
           margin:0 25%;
        }

        #content{
           position:absolute;
        }

	#header,#footer { 
	  overflow: hidden;
	  background: orange;
	}

        #footer{
          width:100%;
          z-index:3;
          position:absolute;
        }
	 	 
	#main {
       	  width:80%;
          background-color:white;
          margin:0 auto;
	  overflow:hidden;

	}

        #left, #right {
	  display: inline-block;
          position:absolute;
	  width:10%;
          height:100%;
          /*background: green url(line.png) repeat-y 50% 0;*/
	}
	 
	#left {
	  background-color:blue;
	}
	#right {
	  background-color:green;
	  margin-left:90%;
	}
</style>


</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Header Section</h1>
    </div>
    <div id="content">
       <div id="left"><img src="line.png" style="height:100%; width:100%;" /></div>
        <div id="right"><img src="line.png" style="height:100%; width:100%;" /></div>
        <div id="main">
            <p>Main Body</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis laoreet nulla fringilla tristique. Integer eu diam diam, nec blandit lorem. Aenean condimentum rutrum feugiat. Etiam lacinia cursus adipiscing. Duis dignissim felis nec nisi bibendum quis condimentum nunc adipiscing. Maecenas tristique mollis lectus sed dignissim. Proin nisl neque, fermentum in condimentum eu, gravida vel eros. Duis faucibus vestibulum ligula eu mattis. Etiam blandit justo nec risus cursus sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, lectus vitae sagittis pharetra, magna sapien euismod neque, eget tempor ipsum metus at nisi. Cras condimentum, felis vitae vulputate tempor, ipsum quam aliquam dolor, in hendrerit est ante in nisl. Suspendisse quis arcu eu massa volutpat eleifend nec vel tellus.</p>
            <p>Donec at tortor vitae nibh iaculis volutpat eu rutrum nulla. Mauris faucibus volutpat massa quis pretium. Duis odio est, feugiat a posuere ac, tincidunt non sem. Nam at nibh lacus, ac volutpat lacus. Quisque sit amet purus a augue condimentum accumsan sit amet sed quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras non sapien eget justo scelerisque euismod vitae sit amet arcu.</p>
            <p>Pellentesque eget sem quis libero laoreet gravida. Quisque mi velit, porttitor quis vestibulum at, hendrerit sit amet lorem. Morbi interdum magna at neque laoreet hendrerit. Nam ultricies laoreet sapien, non laoreet nunc vulputate mollis. Quisque a orci vitae magna porta ornare. Donec ipsum lectus, suscipit a laoreet ac, mattis vitae urna. Morbi pharetra mauris venenatis arcu tincidunt sed auctor odio vestibulum. Ut et nibh tellus, convallis lacinia ligula. Maecenas nisi nulla, congue at adipiscing faucibus, luctus vel turpis.</p>
            <p>Aenean risus orci, aliquet ut interdum vel, molestie sit amet tortor. Duis eu purus diam, id molestie lacus. Fusce eget nisi at tellus aliquet rutrum nec semper mauris. Duis nisi leo, sagittis gravida volutpat non, viverra ac est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque interdum faucibus egestas. Sed dolor purus, luctus ut egestas at, scelerisque eu elit. Fusce ante nunc, posuere ac ullamcorper sed, lacinia in odio. Integer eget nisl orci. Quisque in mattis neque. Nunc libero massa, condimentum a eleifend vitae, tincidunt ut felis. Ut ultrices, risus id tincidunt dignissim, lacus tellus convallis turpis, sit amet scelerisque est felis ac massa. Aenean accumsan est at ante tincidunt sit amet ornare ligula sollicitudin. Nunc arcu nulla, molestie at sodales nec, ultrices dapibus est. Suspendisse id sem velit, vel semper elit.</p>
            <p>Aliquam erat volutpat. Duis tortor augue, eleifend fermentum cursus eget, luctus a sapien. Etiam massa odio, sollicitudin nec ullamcorper eget, cursus in arcu. Suspendisse sed augue orci. Morbi mollis sem at dui laoreet lobortis. Vestibulum vestibulum velit et felis fringilla ultrices. Aenean commodo nisi a felis eleifend eget consequat purus consequat. Quisque dignissim, arcu et scelerisque congue, tortor diam lacinia purus, eu vulputate urna sem nec leo. Aenean lorem massa, pellentesque vitae scelerisque hendrerit, vulputate eu est. Aenean at pretium risus. Sed dui quam, sodales et ullamcorper ut, fringilla non libero. Morbi mattis ornare fermentum. Cras blandit scelerisque molestie. </p>
        </div>
    <div id="footer">
        <p>footer section</p>
    </div>
    </div>

</div>

You'll have to replace the image source with a valid image of your own. You can either use the <img /> tags in the left and right columns to display your images or you could remove those elements and set the background of the left and right columns to the image that you desire.

-Frinny

**Baaliefiy** · Nov 7 '12, 08:23 PM

Thx Frinavale I'll give it a try, I'll let ya know how it goes.

**sharmahemal** · Nov 9 '12, 12:41 PM

Code:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright@</div>

</div>

</body>
</html>

**Frinavale** · Nov 9 '12, 02:08 PM

@sharmahemal, the code you posted will display 2 column format,and the columns do not stretch to the content...

-Frinny

**sharmahemal** · Nov 9 '12, 05:24 PM

yes i know that but if he edit this code he will surely making to given image table.

**Baaliefiy** · Nov 9 '12, 05:42 PM

thx for all the responses, I'm gonna use the code that Franavale suggested, it works like a charm.

3 column html layout that stretches to the size of the content

3 column html layout that stretches to the size of the content

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment