Rotsyx Rotsyx - 3 months ago 18
CSS Question

How to center form request divs inside a main div container

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 behaviour.

I'm open to anything like PHP jQuery or such. I though about counting
$sql
results and change positioning 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.