473,405 Members | 2,415 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > 3 column html layout that stretches to the size of the content

Join Bytes to post your question to a community of 473,405 software developers and data experts.

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

ok I'm trying to create a 3 column layout having left and right column containing pictures and the centre column containing text
similar to the image attached below, without borders of course. I also want the left and right column to be a fixed width but want the height to change as and when more text is entered into the centre column, there by changing the size of the pictures.

But I'm having trouble, either the floats fall out of the container, the pictures don't appear or they do stick to the width of the columns, any help with the html and css of this layout would be greatly appreciated.



Thanks all
Attached Images
File Type: jpg layout.jpg (17.7 KB, 192 views)
Oct 30 '12 #1

✓ answered by Frinavale

I used the position:absolute 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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
  3. <head>
  4.     <title>3 column layout with pictures - HTML / CSS</title>
  5.  
  6. <style>
  7.     html {
  8.       background: #333333;
  9.     }
  10.  
  11.     p{
  12.           padding:5px;
  13.         }
  14.  
  15.     #wrapper{
  16.            position:absolute; 
  17.            width: 50%;
  18.            margin:0 25%;
  19.         }
  20.  
  21.         #content{
  22.            position:absolute;
  23.         }
  24.  
  25.     #header,#footer { 
  26.       overflow: hidden;
  27.       background: orange;
  28.     }
  29.  
  30.         #footer{
  31.           width:100%;
  32.           z-index:3;
  33.           position:absolute;
  34.         }
  35.  
  36.     #main {
  37.              width:80%;
  38.           background-color:white;
  39.           margin:0 auto;
  40.       overflow:hidden;
  41.  
  42.     }
  43.  
  44.         #left, #right {
  45.       display: inline-block;
  46.           position:absolute;
  47.       width:10%;
  48.           height:100%;
  49.           /*background: green url(line.png) repeat-y 50% 0;*/
  50.     }
  51.  
  52.     #left {
  53.       background-color:blue;
  54.     }
  55.     #right {
  56.       background-color:green;
  57.       margin-left:90%;
  58.     }
  59. </style>
  60.  
  61.  
  62. </head>
  63. <body>
  64. <div id="wrapper">
  65.     <div id="header">
  66.         <h1>Header Section</h1>
  67.     </div>
  68.     <div id="content">
  69.        <div id="left"><img src="line.png" style="height:100%; width:100%;" /></div>
  70.         <div id="right"><img src="line.png" style="height:100%; width:100%;" /></div>
  71.         <div id="main">
  72.             <p>Main Body</p>
  73.             <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>
  74.             <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>
  75.             <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>
  76.             <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>
  77.             <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>
  78.         </div>
  79.     <div id="footer">
  80.         <p>footer section</p>
  81.     </div>
  82.     </div>
  83.  
  84. </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

8 2036
Go through this below link it will be helpful for u...
http://www.456bereastreet.com/archiv...yout_with_css/
Nov 1 '12 #2
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.
Nov 1 '12 #3
Frinavale
9,735 Expert Mod 8TB
I used the position:absolute 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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
  3. <head>
  4.     <title>3 column layout with pictures - HTML / CSS</title>
  5.  
  6. <style>
  7.     html {
  8.       background: #333333;
  9.     }
  10.  
  11.     p{
  12.           padding:5px;
  13.         }
  14.  
  15.     #wrapper{
  16.            position:absolute; 
  17.            width: 50%;
  18.            margin:0 25%;
  19.         }
  20.  
  21.         #content{
  22.            position:absolute;
  23.         }
  24.  
  25.     #header,#footer { 
  26.       overflow: hidden;
  27.       background: orange;
  28.     }
  29.  
  30.         #footer{
  31.           width:100%;
  32.           z-index:3;
  33.           position:absolute;
  34.         }
  35.  
  36.     #main {
  37.              width:80%;
  38.           background-color:white;
  39.           margin:0 auto;
  40.       overflow:hidden;
  41.  
  42.     }
  43.  
  44.         #left, #right {
  45.       display: inline-block;
  46.           position:absolute;
  47.       width:10%;
  48.           height:100%;
  49.           /*background: green url(line.png) repeat-y 50% 0;*/
  50.     }
  51.  
  52.     #left {
  53.       background-color:blue;
  54.     }
  55.     #right {
  56.       background-color:green;
  57.       margin-left:90%;
  58.     }
  59. </style>
  60.  
  61.  
  62. </head>
  63. <body>
  64. <div id="wrapper">
  65.     <div id="header">
  66.         <h1>Header Section</h1>
  67.     </div>
  68.     <div id="content">
  69.        <div id="left"><img src="line.png" style="height:100%; width:100%;" /></div>
  70.         <div id="right"><img src="line.png" style="height:100%; width:100%;" /></div>
  71.         <div id="main">
  72.             <p>Main Body</p>
  73.             <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>
  74.             <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>
  75.             <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>
  76.             <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>
  77.             <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>
  78.         </div>
  79.     <div id="footer">
  80.         <p>footer section</p>
  81.     </div>
  82.     </div>
  83.  
  84. </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
Nov 1 '12 #4
Thx Frinavale I'll give it a try, I'll let ya know how it goes.
Nov 7 '12 #5
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <div id="container" style="width:500px">
  6.  
  7. <div id="header" style="background-color:#FFA500;">
  8. <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
  9.  
  10. <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
  11. <b>Menu</b><br>
  12. HTML<br>
  13. CSS<br>
  14. JavaScript</div>
  15.  
  16. <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
  17. Content goes here</div>
  18.  
  19. <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
  20. Copyright@</div>
  21.  
  22. </div>
  23.  
  24. </body>
  25. </html>
Nov 9 '12 #6
Frinavale
9,735 Expert Mod 8TB
@sharmahemal, the code you posted will display 2 column format,and the columns do not stretch to the content...

-Frinny
Nov 9 '12 #7
yes i know that but if he edit this code he will surely making to given image table.
Nov 9 '12 #8
thx for all the responses, I'm gonna use the code that Franavale suggested, it works like a charm.
Nov 9 '12 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

3
Two column layout, left column fixed width
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
HTML / CSS
9
[Q] Two Column Layout - right column relative to left
by: Eric | last post by:
I would like to setup a two column layout for my web page using CSS. I would like the Left column width to be auto. Can I have the right column be offset by 8 pixels from the right edge of the...
HTML / CSS
16
How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? ...
HTML / CSS
8
3 column layout problems -- is there a solution without tables?
by: kaeli | last post by:
I have had a little free time lately to revisit a problem I have with the 3 column layout plus a header and footer. See this example: http://glish.com/css/7.asp There is a header and 3...
HTML / CSS
15
2-Column Layout -- Verticle Problem
by: Tamblyne | last post by:
This problem has got to have a simple solution and I can't be the first person who has ever handled it. Perhaps Google is no help because I'm not using the right terms? (I did find one post...
HTML / CSS
3
Two column layout with strange behaviour in Internet Explorer
by: ckirchho | last post by:
Halo, I am trying to realize a two column layout basically like this: <html> <head> <style> leftCol { float: left; width: 15em; }
HTML / CSS
10
Two-column layout
by: Philipp E. Imhof | last post by:
Hi! I am experiencing a problem with a two-column layout -- apparently I am not the first person, but the solutions I found in GG did not give me what I was looking for. The page should be as...
HTML / CSS
9
Fluid and Fixed 2 Column Layout
by: TristaSD | last post by:
Hi, How do I accomplish the following: In a two-column layout, the right column is 200px wide, and the left column is fluid? Thanks!
HTML / CSS
3
2-column layout and top margin of floated column
by: =?ISO-8859-1?Q?Ney_Andr=E9_de_Mello_Zunino?= | last post by:
Hello. I seek confirmation for the reasons behind a margin-related behavior I have observed. I have set up a simple test page to illustrate the issue. The page shows a very simple 2-column...
HTML / CSS
1
Death Slaught
Simple Three Column Layout
by: Death Slaught | last post by:
I will be showing you how to make a very simple but effective three column layout. First we will begin with the HTML, or structure, of our three column layout. <!DOCTYPE html PUBLIC...
HTML / CSS
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!