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
- <body>
- <div id="left-adv">
- <div id="adv-img"><img src="img/images1.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images2.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images3.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images4.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images5.jpg" alt="Vocations" width="100%"/></div>
- </div> <!--left-adv -->
- <div id="page-container"> page container </div> <!--page-container -->
- <div id="right-adv">
- <div id="adv-img"><img src="img/images6.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images7.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images8.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images9.jpg" alt="Vocations" width="100%"/></div>
- <div id="adv-img"><img src="img/images10.jpg" alt="Vocations" width="100%"/></div>
- </div><!--right-adv -->
- </body>
Expand|Select|Wrap|Line Numbers
- #page-container{
- width: 70%;
- margin: 0;
- padding: 0;
- background: red;
- /* display:inline-block; */
- float: left;
- }
- #left-adv{
- width: 15%;
- background: blue;
- float: left;
- margin: 0;
- padding: 0;
- }
- #right-adv{
- width: 15%;
- background: blue;
- float: left;
- margin: 0;
- padding: 0;
- }
- #adv-img{
- display:inline-block;
- }