Rotsyx Rotsyx - 3 months ago 8
CSS Question

How to center form request divs inside a main div container (particular case)

I have the following issue that's bringing me mad:

I have a main container with a search form on the left and another div container on the right. On the right container we find the form submit found values which are on another div (let's call it result div).

This is the css:

.main-container{
margin: 0 auto;
overflow: auto;
width: 90vw;
height: 85vh;
background-color: #ff9933;
}


/*form inside main-container on the left*/

.form{
float: left;
width: 15vw;
margin-top: 2vh;
margin-left: 2vh;
position: absolute;
}


/* results-container inside main-container on the right*/

.results-container{
display: inline-block;
width: 70vw;
float: right;
}

/* found results div inside it's container */

.result{
display: inline-block;
width: 284px;
height: 315px;
position: relative;
margin: 0 auto;
}


Here are some images to make you understand, thanks for your help

What I currently have

What I want it to look like

I'm not able to center results inside results-container. If I remove
display: inline-block;
everything is centered but not aligned (one result per row). If I let it this way, all results are stick to the left which is not the desired behavior.

I'm open to anything like php jquery or such. I though about counting $sql results and change positionning depending on results count() but that's not practical

Answer

I am not 100% sure if this will work or not as I don't have a working JSfiddle or something to test it but try adding following text-align: center; to your .results-container css block.

.results-container{
    display: inline-block;      
    width: 70vw;
    float: right;
    text-align: center;
}

Let me know if this works or not.