How do I get my text div under my image div?

Question

I made 3 kinds of div's, 2 on the left side and one on the right side using float. Now I want automatically that my div text comes under my img div but I cannot get it working with 20 pixels. I have looked around for a bit on stackoverflow but couldn't find the right answer, also most posts are 2-3 years old. I was wondering if someone could help me out?

Visit problem

HTML:
    <body>
        <div id="content">
            <div class="b1"> </div>
            <div class="b2"> </div>
            <div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>  
    </body>

CSS:

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    background-color: #fff;
    width: 962px;
    margin: 0 auto; 
}

.b1 { /*img div*/
    background-color: #34495e;
    height: 290px;
    width: 470px;
    float: left;
    position: absolute;
}

.b2 { /*big img div*/
    background-color: blue;
    height: 600px;
    width: 470px;
    float: right;
}

.b3 { /* text div*/
    background-color: #14495e;
    color: #6d6f6f;
    margin: 0;
    height: 290px;
    width: 470px;
    padding: 4% 6% 0;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
}

h3 {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

Thanks for the help!

In your question can you refer to the divs by their class so we know what div you want under the other? — Christopher Lamm, Sep 22 '14 at 13:23
Hello Christopher, I have added it in the fiddle but I will add it as well in the question. — FlatDesigner, Sep 22 '14 at 13:24
use `position:relative;` to b1 , b2 [jsfiddle demo link](http://jsfiddle.net/v8kfc38h/5/) — Farshad, Sep 22 '14 at 13:31
In your original question, you specified exact height and width values, is this actually the case in you real-world application? or do you also want a responsive design? — Marc Audet, Sep 22 '14 at 13:56

Michael Bates · Answer 1 · 2014-09-22T13:55:23.737

Like this?

HTML

<body>
    <div id="content">
        <div id="left">
            <div class="b1"> </div>
            <div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>  
        </div>
        <div id="right">
            <div class="b2"> </div>
        </div>
</body>

CSS

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    background-color: #fff;
    width: 962px;
    margin: 0 auto; 
}

#left, #right {
    float: left;
}

.b1 { /*img div*/
    background-color: #34495e;
    height: 290px;
    width: 470px;
}

.b2 { /*big img div*/
    background-color: blue;
    height: 600px;
    width: 470px;
}

.b3 { /* text div*/
    background-color: #14495e;
    color: #6d6f6f;
    margin: 0;
    height: 290px;
    width: 471px;
    padding: 4% 6% 0;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
}

h3 {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

Basically I put the two divs you want to appear on the left in a div called #left and the one div you want to appear floated next to it in a div called #right, and then floated those two divs next to each other. Then the two divs in the #left div will naturally appear one under the other.

Fiddle: http://jsfiddle.net/v8kfc38h/4/

score 0 · Answer 2 · answered Sep 22 '14 at 13:30

0

Remove position:absolute from b1 class

answered Sep 22 '14 at 13:30

joff23

1

But than will only text go down and not also the background color. – FlatDesigner Sep 22 '14 at 13:33

score 0 · Answer 3 · answered Sep 22 '14 at 14:02

Change your CSS to the following:

body {
    background-color: #efede7;
    line-height: 1.5;
}
#content {
    background-color: #fff;
    width: 962px;
    margin: 0 auto;
}
.b1 {
    /*img div*/
    background-color: #34495e;
    height: 290px;
    width: 470px;
    float: left;
    /*position: absolute;  removed, not required*/
}
.b2 {
    /*big img div*/
    background-color: blue;
    height: 600px;
    width: 470px;
    float: right;
}
.b3 {
    /* text div*/
    background-color: #14495e;
    color: #6d6f6f;
    height: 290px;
    width: 355px; /*changed, because padding adds up to form total width of 470px*/
    padding: 4% 6% 0;
    font-size: 1.0625em;
    font-family:'ProximaNova', sans-serif;
    float:left; /*added*/
}
h3 {
    margin: 0;
    padding: 0;
    font-family:'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

Working DEMO.

score 0 · Accepted Answer · answered Sep 22 '14 at 14:08

Your #content block has a fixed width and the child elements .b1, .b2, .b3 all have specific widths and heights. This is a perfect layout for absolute positioning.

Try the following:

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    background-color: #fff;
    width: 962px;
    margin: 0 auto; 
    position: relative;
}

.b1 { /*img div*/
    background-color: #34495e;
    height: 290px;
    width: 470px;
    position: absolute;
    top: 0;
    left: 0;
}

.b2 { /*big img div*/
    background-color: blue;
    height: 600px;
    width: 470px;
    position: absolute;
    top: 0;
    right: 0;
}

.b3 { /* text div*/
    background-color: #14495e;
    color: #6d6f6f;
    margin: 0;
    height: 290px;
    width: 470px;
    padding: 20px;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    position: absolute;
    top: 310px;
    left: 0;
    box-sizing: border-box;
}

h3 {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

<div id="content">
    <div class="b1"> </div>
    <div class="b2"> </div>
    <div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>  
</div>

score 0 · Answer 5 · answered Sep 22 '14 at 14:09

Thanks for helping me! I found it also just out with a classmate from me =] Marc Audet did get the closed to the answer thanks for it!

My solution HTML:

<body>
    <div id="content">
        <div class="b1"> </div>
        <div class="b2"> </div>
        <div class="b3"><p><h3>Wildlife</h3>
            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p>
        </div>
</body>

My solution CSS:

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    background-color: #fff;
    width: 962px;
    margin: 0 auto; 
}

.b1 {
    background-color: #34495e;
    height: 290px;
    width: 470px;
    float: left;
}

.b2 {
    background-color: blue;
    height: 600px;
    width: 470px;
    float: right;
}

.b3 {
    background-color: #fff;
    color: #6d6f6f;
    margin-top: 20px;
    height: 250px;
    width: 430px;
    padding: 20px;
    float: left;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

Thanks for the help everyone!

Greetings, FlatDesigner

You cannot put headings inside paragraphs - http://stackoverflow.com/questions/15656785/should-a-heading-be-inside-or-outside-a-p Apart from that you should consider using HTML5's figcaption for text related to images - http://html5doctor.com/the-figure-figcaption-elements/ — jan199674, Sep 22 '14 at 14:13

How do I get my text div under my image div?

5 Answers5