Q:
How can I make my divs to expand with the content with a pure css?
This is my first post in stackoverflow, I just started to code, and today my first project was creating a webpage with some HTML and CSS.
I wanted to make my divs to expand their size, based on the content in the right column. I have managed to do it with jquery and javascript, but I wanted to see if there is any other way to do it by pure CSS.
I tried every style I've found on the web but the things I found didn't work or they made the boxes grow and make a new line.
I know that my css code is terrible and that I could have done better, if you could help me with that I would appreciate that too. I was too interested in that subject to read the W3c guide, maybe I just didn't read well.
And one last thing. This project is going to be finished with a CMS with a wordpress page builder, so the solution must be integrated to that environment.
Thanks in advance for your attention. I really aprecciate it.
Here is my code. I have made comments so you can understand what I am trying to do.
/*Here i define my main div*/
#main-div{
width: 100%;
display: inline-block;
min-height: 500px;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
border: 1px solid grey;
}
/*Here i define the right column*/
#right-div{
background-color: blue;
height: auto;
width: auto;
overflow: auto;
}
/*Here is the CSS that makes that the div don't go under the red square. It works because this div goes after the red square*/
.test{
height: 50px;
width: 50px;
background-color: red;
}
Text Text Text Text
A:
You're just missing position:relative on the parent.
(Note: You should be using .classname as a class selector instead of an id selector.)
Updated jsFiddle
Text Text Text Text
I should also note that I removed your inline styling of height:500px, as you're using display:inline-block; and have also set height:auto to avoid a fix height.
A:
The issue is with your display:inline-block; property. Since the DIVs are of the same size, they align left-right. The inline block will only allow 1 of the DIVs to be at the next line, since they both have a minimum width.
Use display:flex and flex-direction:column to allow the DIVs to align left-right instead of top-bottom.
EXAMPLE HERE: https://jsfiddle.net/qyw5r5L6/
/*Add this to your CSS code*/
.col{
display:flex;
flex-direction:column;
border: 1px solid grey;
align-items: center;
}
Text Text Text Text
I tried out with a simple 2 divs inside a flex container. By setting the properties on the container, I was able to create space between the two divs. (The border you had on the columns was messing up your code)
EXAMPLE HERE: https://jsfiddle.net/0vwsk3bq/
Text Text Text Text
Text Text Text Text
A:
You don't need min-height and auto. You can adjust the height of the flexbox's parent as to the size of the container's content. I've also simplified your html a bit.
.flex-container {
display: flex;
flex-direction: column;
}
.row {
min-width: 500px;
}
.test {
border: 1px solid grey;
width: 50%;
padding: 20px;
background-color: blue;
}
