How do I use a background image with floated divs

Question

How do I place divs next to each other? I tried it with "float: left" and it works but when I wanted to give the container-div (where the other divs are inside) a background (image or color) this is not displayed because the inner divs are then placed outside the container-div. Do you have any idea how to solve that problem? I can't place the inner divs with "margin" because the number of inner divs can change (javascript, angular) and their size isn't known.

Here is my html-code:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>ToDo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body >
    <div ng-controller="Tasks as tasksCtrl" class="background" ng-click="close()">
        <div class="add">
            <img src="pin4.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 22px; padding-right: 22px; padding-bottom:20px;">
                <a href ng-click="setEdit()">add</a>
            </div>
        </div>
        <div class="add" ng-show="edit" style="padding: 20px">
            <form name="form" novalidate>
                <div class="task">
                    Task hinzuf&uuml;gen
                </div>
                <input type="text" maxlength="25" ng-model="title" style="height:15px; max-width:541px; width:541px; margin-top:10px; font-size: 10px; padding-left: 10px;" placeholder="Titel" required></br>
                <textarea ng-model="body" style="height: 50px; max-width:541px; width:541px; margin-top:5px; font-size: 10px; padding-left: 10px;" placeholder="Bitte hier Text eingeben" required></textarea></br>
                <div style="width: 580px; margin-top:10px" align ="justify">Datum: <input type="date" ng-model="date" style="height:13px; width:125px;" required><span style="padding-left:20%">Uhrzeit: </span><input type="time" ng-model="time" style="height:13px; width:65px" required>
                    <select name="Group" size="1" ng-model="group">
                        <option ng-repeat="group in groups">{{group.name}}</option>
                    </select>
                    <button style="padding:4px; margin-left:150.5px" ng-click="tasksCtrl.addTask(title, body, group, date)" ng-disabled="form.$invalid">Hinzuf&uuml;gen</button>
                </div>
            </form>
        </div>
        <div class="add">
            <img src="pin3.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;">date</div>
        </div>
         <div class="add">
            <img src="pin.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;">priority</div>
        </div>
        <div class="add">
            <img src="pin2.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;"><a href ng-click="sortBy = 'group'; reverse = !reverse">groups</a></div>
        </div>
        <div class="add">
            <img src="pin4.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;">calendar</div>
        </div>

        <div class="ng-class: task.classe" ng-repeat="task in tasks | orderBy:sortBy:reverse" ng-dblclick="setEditId($index)">
            <img ng-src="{{task.group.image}}" width="30px" height="30px" align="right" style="margin-right: 30%">
            <div style="padding: 20px">{{task.title}}</br>{{task.body}} {{task.dueDate}}</div>
        </div>
        <div class="add" style="padding: 20px; font-size: 22px" ng-show="specedit">
            <form name="form" novalidate>
                <div class="task">
                    Task hinzuf&uuml;gen
                </div>
                <table>
                    <tr>
                        <td><input type="text" maxlength="25" ng-model="title" style="height:20px; max-width:458px; width:458px; margin-top:10px; font-size: 12px; padding-left:10px;" placeholder="Titel" required></td>
                        <td width="400px" style="vertical-align: bottom;"><span style="padding-left: 30px">Steps</span><div class="addsteps"><a href="" ng-click="tasksCtrl.addStep(title, body)" style="text-decoration:none; color: black">+</a></div></td>
                    </tr>
                    <tr>
                        <td><textarea ng-model="body" style="height: 160px; max-width:450px; width:450px; margin-top:1px; font-size: 12px; padding: 10px;" placeholder="Bitte hier Text eingeben" required></textarea></td>
                        <td width="400px" style="font-weight: normal;">
                            <div style="height: 176px; overflow: auto; border: 2px solid; margin-top: 2px; margin-left: 10px">
                                <ul ng-repeat="step in tasks[id].steps" style="margin-top:10px; margin-left:-5px">
                                    <li class="ng-class: step.status"> {{step.title}} </br> {{step.body}} </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>
                </br>
                <div style="width: 580px; margin-top:10px" align ="justify">Datum: <input type="date" ng-model="date" style="height:13px; width:125px;" required><span style="padding-left:20%">Uhrzeit: </span><input type="time" ng-model="time" style="height:13px; width:65px" required>
                    <select name="Group" size="1" ng-model="group" style="padding-left:20%">
                        <option ng-repeat="group in groups">{{group.name}}</option>
                    </select>
                    <button style="padding:4px; margin-left:150.5px" ng-click="tasksCtrl.addTask(title, body, group, date)" ng-disabled="form.$invalid">Hinzuf&uuml;gen</button>
                </div>
            </form>
        </div>
    </div>


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script> -->
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

and this is my css-code:

.background {
   background: url(wall.jpg);
}

.add {
   font-family: "KG You Wont Bring Me Down";
   font-weight: bold;
   font-size: 35px;
   line-height: 30px;
   background-color: #FEEC91;
   margin:20px 10px 30px 10px;
   float: right;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   -webkit-transform: rotate(0deg);  chrome & safari
   -moz-transform: rotate(0deg); /* firefox */
   -o-transform: rotate(0deg); /* opera */
   transform: rotate(0deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

.note1 {
   font-family: "KG You Wont Bring Me Down";
   font-size: 18px;
   background: #FEEC91;
   margin-top: 20px;
   margin-left: 18px;
   float: left;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   width: 350px;
   -webkit-transform: rotate(-3deg); /* chrome & safari*/
   -moz-transform: rotate(-3deg); /* firefox */
   -o-transform: rotate(-3deg); /* opera */
   transform: rotate(-3deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

.note2 {
   font-family: "KG You Wont Bring Me Down";
   font-size: 18px;
   background: #FEEC91;
   margin-top: 20px;
   margin-left: 40px;
   float: left;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   width: 340px;
   -webkit-transform: rotate(1.5deg); /* chrome & safari*/
   -moz-transform: rotate(1.5deg); /* firefox */
   -o-transform: rotate(1.5deg); /* opera */
   transform: rotate(1.5deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

.note3 {
   font-family: "KG You Wont Bring Me Down";
   font-size: 18px;
   background: #FEEC91;
   margin-top: 10px;
   margin-left: 10px;
   float: left;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   width: 330px;
   -webkit-transform: rotate(-0.5deg); /* chrome & safari*/
   -moz-transform: rotate(-0.5deg); /* firefox */
   -o-transform: rotate(-0.5deg); /* opera */
   transform: rotate(-0.5deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

ok it's very long... the container-div is that one with the class background ...

possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) — Hashem Qolami, Sep 01 '14 at 09:23
Also take a look at: http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase/16568504#16568504 — Hashem Qolami, Sep 01 '14 at 09:24
You know how to place divs next to each other.. That's not your problem. Your problem is "how do I use a background image with floated divs", and if you're asking that question it's because you don't understand how the box model works, and how floats are rendered vs other elements. — Erik Funkenbusch, Sep 01 '14 at 09:30
`and if you're asking that question it's because you don't understand how the box model works, and how floats are rendered vs other elements.` Educate him then. — Mardoxx, Sep 01 '14 at 09:33
@Mardoxx - It's outside the bounds of the question asked, and far too much topic for an answer. — Erik Funkenbusch, Sep 01 '14 at 09:40
@ErikFunkenbusch sorry... I changed the name of the question. You're right... But my english isn't the best (I come from Germany) and I didn't know how to express. — Johanna, Sep 01 '14 at 10:06

score 1 · Answer 1 · answered Sep 01 '14 at 09:26

1

Try this:

CSS

.background {
   background: url(wall.jpg);
   overflow: hidden;
}

answered Sep 01 '14 at 09:26

Faiz Ahmed

1,045
8
16

Ok... thanks that works :). But there is one other problem yet. When you click on "add" the formular appears but if you click in it to fill in the form it disappears immediately. That's because the background is a big button and when you click on it the formular disappears. But evidently the button is in the foreground (so it lays over the formular. "z-index" doesn't help. Any idea? – Johanna Sep 01 '14 at 09:38
http://jsfiddle.net/1j6t4/bp6p17Lg/ but the angular doesn't work... so it looks very creepy and you can't really see what I mean in the result – Johanna Sep 01 '14 at 09:54

score -2 · Answer 2 · answered Sep 01 '14 at 09:30

-2

you need to add:

overflow:hidden;

to your container. Here you have an example: http://jsfiddle.net/sch0waqw/

answered Sep 01 '14 at 09:30

Alvaro Menéndez

7,646
3
30
53

ops... Faiz Ahmed answered first. – Alvaro Menéndez Sep 01 '14 at 09:31
FFS, you don't need to downgrade my answer. I had the question open in the browser while I was making the jsfiddle, didn't noticed it was already answered – Alvaro Menéndez Sep 01 '14 at 09:32
i didn't downgrade your answer... i did nothing – Johanna Sep 01 '14 at 09:40
Didn't mean you. Sorry. the msg was for whatever enjoys to downgrade answers with no valid reasons – Alvaro Menéndez Sep 01 '14 at 10:00

How do I use a background image with floated divs

2 Answers2

CSS