473,320 Members | 1,853 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

The image, instead of staying in its column, jumps out.

103 100+
I would like to have webpage which consists of three columns: left-adv, container, right-adv. The right and left columns should contain images of advertisements.

The problem is that the last image from the right column jumps to the bottom of the page. I deleted this image. When the consequent imaged jumped. I deleted the second image. When again the last image of remaining images jumped down.

How to keep the images in the "right-adv" column?

Expand|Select|Wrap|Line Numbers
  1. <body>        
  2.  
  3. <div id="left-adv">    
  4. <div id="adv-img"><img src="img/images1.jpg" alt="Vocations" width="100%"/></div>
  5. <div id="adv-img"><img src="img/images2.jpg" alt="Vocations" width="100%"/></div>
  6. <div id="adv-img"><img src="img/images3.jpg" alt="Vocations" width="100%"/></div>
  7. <div id="adv-img"><img src="img/images4.jpg" alt="Vocations" width="100%"/></div>
  8. <div id="adv-img"><img src="img/images5.jpg" alt="Vocations" width="100%"/></div>
  9. </div> <!--left-adv -->          
  10.  
  11. <div id="page-container"> page container </div> <!--page-container -->    
  12.  
  13. <div id="right-adv">     
  14. <div id="adv-img"><img src="img/images6.jpg" alt="Vocations" width="100%"/></div>
  15. <div id="adv-img"><img src="img/images7.jpg" alt="Vocations" width="100%"/></div>
  16. <div id="adv-img"><img src="img/images8.jpg" alt="Vocations" width="100%"/></div>
  17. <div id="adv-img"><img src="img/images9.jpg" alt="Vocations" width="100%"/></div>
  18. <div id="adv-img"><img src="img/images10.jpg" alt="Vocations" width="100%"/></div>
  19. </div><!--right-adv -->      
  20.  
  21. </body>
Expand|Select|Wrap|Line Numbers
  1. #page-container{
  2.     width: 70%;
  3.     margin: 0;
  4.     padding: 0;
  5.     background: red;
  6.     /* display:inline-block; */
  7.     float: left;
  8. }
  9.  
  10. #left-adv{
  11.     width: 15%;
  12.     background: blue;
  13.     float: left;
  14.     margin: 0;
  15.     padding: 0;
  16. }
  17.  
  18. #right-adv{
  19.     width: 15%;
  20.     background: blue;
  21.     float: left;
  22.     margin: 0;
  23.     padding: 0;
  24. }
  25.  
  26. #adv-img{
  27.     display:inline-block;
  28. }
Aug 17 '14 #1
3 1461
Exequiel
288 256MB
you need to put a fixed height for your images for you to align that images.
Expand|Select|Wrap|Line Numbers
  1. #left-adv div img, #right-adv div img{width:100%; height:150px;}
Aug 18 '14 #2
gintare
103 100+
Thanks Exequiel. But i would like that height of images would adjust to window size. I can not give fixed height.

The solutions which i have notices by accident, was to insert empty comment just before the page container:
Expand|Select|Wrap|Line Numbers
  1.  ...
  2.  </div> <!--left-adv --> 
  3.  <!-- -->
  4. <div id="page-container"> page container
  5. ...
I do scripting in XAMPP. Maybe it is XAMPP bug. After inserting empty comment after left column, the last image on the right column stopped jumping to the bottom of the page.
Aug 18 '14 #3
nomad
664 Expert 512MB
Then have your high for you div at 100%.
-nomad
Aug 18 '14 #4

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

Similar topics

0
by: jiatiejun | last post by:
How to bind PictureBox.Image to database image or bin column? thanks
0
by: Abhishek Bagga | last post by:
I want to insert Image in the column headers of the Listview control I have been trying this but was unable to achieve it. Is it possible? if yes kindly guide me how to achieve this. -- -...
0
by: Michelle Stone | last post by:
i am puzzled. i have previously bound datasets to datagrids which contain the filename of IMAGES. And i use template columns to show the image for each row. But now it is not working. I have reviewed...
3
by: Sridhar | last post by:
Hi, I have created a user control which has the html code as follows <TABLE id="ToolBarTable" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td align="right"...
2
by: satish | last post by:
hi, i have inserted the image present in mydocuments using alter command create table aa(a int, d image) insert into aa values (1,'F:\prudhvi\baba 002.jpg') when i do select * from aa i...
4
by: J055 | last post by:
Hi There doesn't appear to be a ImageUrl property for the HyperLinkField item. You can set an image in the header but not the field row. Or am I missing something? Is there an easy way round...
4
by: mantrid | last post by:
can anyone tell me or direct me to a link that shows how to use an image instead of a submit button and a form to post data forward to the next page? I wish to replace my buttons with images(...
1
by: kdjgkimber | last post by:
I have one bit column in my table in SQL 2000. My dataGridView displays it as "True" or "False". What I want to do is display one image if the value was "True" and another if the value was "False".
4
by: silviasalsa | last post by:
how do you subtitute image instead of button for example: i have this code below: and it has a defualt button. how do i replace it with a image button. i dont have a image yet . please help...
2
by: =?Utf-8?B?S2VuTg==?= | last post by:
We're using a System.Windows.Forms.ImageList to store a bunch of Images that I've loaded, and rendering each image in the ImageList during a draw loop. The process was running unusually slow and...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.