Gallery images falls below menu

[Lazaaro]

I'd like to have a vertical menu on the left and a gallery of images to the right. To do that I must put a "float: left" on my menu (I think). The problem is that images in the gallery (supposed to be right) falls below the menu when it ends. Excuse me I can not put my page online, but I can give the code (simplified):

<div id="menu">
    under-menu1 <br />
    under-menu2 <br />
    under-menu3 <br />
</div>
 
<div id="gallery_image">
    <img src="image1" />
    <img src="image2" />
    <img src="image3" />
    ...
</div> 

#left
{
	position: relative;
	width: 190px;
	height: auto;
	float: left;
}
 
#gallery_images
{
	width: auto;
}

And although I like the images that do not go under the menu, but still good in their column (even if the menu stops, it requires that the Gallery can continue to descend, but it does not go under the menu )

[opaper]

To resolve your problem, put your div #gallery_images to float: left too. Other than that I don't find any problem with your code. I would suggest you to provide some more information to get a better solution.

[Lazaaro]

But when I put the gallery in "float: left" it appears directly below the menu (and not right menu).

ok I'm starting to get the gallery of images "encroach" on the menu column.

Now the problem is that if you add images, the div of the gallery "grows", but (and this is the problem) the container div does not grow.

And the "background-color" is applied to the container div (so that the background is applied uniformly to div "menu" and the div "gallery")

So as the container div do "grows up" no, there is a space below the menu (and ugly)

You see the problem?

<div id="container">
    <div id="menu">
        under-menu1 <br />
        under-menu2 <br />
        under-menu3 <br />
    </div>
 
    <div id="gallery_image">
        <img src="image1" />
        <img src="image2" />
        <img src="image3" />
        ...
    </div>
</div> 

#container
{
    background-color: black;
    width: auto;
    height: 100%;
    min-height: 900px;
}
 
#left
{
    position: relative;
    background-color: rgb(13,122,242);
    width: 15%;
    min-width: 80px;
    max-width: 190px;
    height: auto;
    min-height: 500px;
    float: left;
    margin-right: 5px;
    overflow: hidden;
    border: 1px solid white;
}
 
.gallery_images
{
    background-color: black;
    width: 83%;
    float: left;
}

[Zecho]

Did you tried to remove the '<div id="gallery_image">' to place a single photo that you change the src to javascript which gives you the css attributes of gallery_image. Try to enlvent and keeping the width: 100% and see what is best.

[DotNetUser]

I understood nothing. What are you trying to do? Getting back to the first question, it is best to have the menu DIV

float : left

as you have done, instead to have the container DIV in normal position with a left margin (margin-left) equal to the size of your menu.

And 'float: left' work well too.

regarding the management of container floating, its a common problem

[Lazaaro]

Maybe I did not understand what you mean but I do not think I need to change the way I built the gallery images (the content is built well). And the width of the site poses no problem.

The problem you see is that I have my div "menu" and my div "gallery" which are all contained in a thick 2 div "container". When there are not too many images it goes well (for the div "container" and even bigger than the div "gallery") but when I add images, the div "gallery" grew up to become bigger than the div "container", and that time it will require the div "container" grow at the same time as the div "gallery" (while there ... the div "gallery" grew up alone, leaving the div "container" far behind)

The trick is that the background is applied to the div "container" (required to have a uniform background over the entire site area) and as the div "container" does not grow to the background either, it looks very ugly.