Search code examples
htmlcsscss-position

How to center more divs inside a big div

I know there's a lot of tutorial that helps you to center a div inside another div... but my problem is bigger and so far I didn't find any useful solution.

I'd like to make something like that: enter image description here

Where everything should be horizontally center aligned.

And the purple div have some external contents, so it's height isn't fixed, and I need it to stay inside the red div (obviously it can scroll if the the contents are too much, but the scroll should be for the grey div, not like in the red frame).

I tried to play with positioning, but with absolute and relative stuff it's working until I try to put the child of the child.

Anyone can help me?

If you're not in the mood to write code for me you can even link me an useful tutorial, because I've found a lot of help for parent-child positioning, but nothing for parent-child-grandchild situation...

Thanks a lot!

Solution

  • I don't know if it's true or not but you can still refer to it if you want :

    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* {
box-sizing:border-box;
}
#container {
width: 98%;
margin-left:1%;
margin-top:1%;
border: 5px solid grey;
}
#main {
border: 5px solid red;
width:580px;
margin: 0 auto;
margin-top:50px;
margin-bottom:50px;
}
#logo {
border: 5px solid green;
width:400px;
margin: 0 auto;
margin-top:20px;
}
#grid {
border: 5px solid blue;
width:540px;
margin: 0 auto;
margin-top:20px;
}
#content {
border: 5px solid purple;
width:400px;
margin: 0 auto;
margin-top:20px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="logo">Logo</div>
<div id="grid">Grid</div>
<div id="content">
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
<h3>HELLO</h3>
</div>
</div>
</div>
</body>
</html>