how to horizontally align nested divs? possibly responsively?

Question

i have a container div named "content1" that I would ideally like to contain three divs that each contain one image and some text.

I want these three nested divs to sit next to one another unless the browser window gets too small, in which case i would like them to stack on top of each other vertically. Right now the divs are just sitting on top of one another....

can anyone please point me in the right direction?

my current (and clearly incorrect) set up is:

HTML

> <div id="content1">
    <div id="item1"><img src="EXAMPLE URL"><br>example text example text example text</div>
    <div id="item2"><img src="EXAMPLE URL"><br>example text example text example text</div>
    <div id="item3"><img src="EXAMPLE URL"><br>example text example text example text</div>
</div>

CSS

#content1 {
    padding: 20px;
    margin-top: 17px;
    margin-bottom: 17px;
    margin-left:auto;
    margin-right:auto;
    width:70%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.25);
    border-bottom-right-radius: 50px 50px;
    border-bottom-left-radius: 50px 50px;
    border-top-left-radius: 50px 50px;
    border-top-right-radius: 50px 50px; }

#item1 {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    color: white;
    font-family:'Oswald';
    text-align: center;
    font-size: 18px;
    width: 80&;
    max-width: 60%;
    padding: 2px;
  }
  #item1 img {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    max-width: 100%;
    height: auto;
  }

If anyone has any clue how to get these three divs to stay side by side and possibly be responsive inside the nested "content1" div I would be incredibly grateful.

Have you taken a look at this http://stackoverflow.com/questions/2417130/how-to-align-two-divs-horizontally — user2569812, Aug 02 '13 at 22:56

score 2 · Answer 1 · answered Aug 03 '13 at 00:00

2

try this out:

#content1 > div{
float:left;
}

answered Aug 03 '13 at 00:00

Facundo Colombier

3,487
1
34
40

score -2 · Answer 2 · answered Aug 02 '13 at 22:57

-2

http://learnlayout.com/

Check this out. This is the most comprehensive basic css layout guide I've ever come across. You must get your answer there.

answered Aug 02 '13 at 22:57

qbr

197
2
2
10

missing answer to the question – Stepan Yakovenko Apr 08 '19 at 14:15

how to horizontally align nested divs? possibly responsively?

2 Answers2