CODEWITHSUNDEEP
htmlcssimagecss-float
MyNameIsSwap
MyNameIsSwap

Reputation: 41

Disappearing divs and odd positioning when using float

I have 2 problems and I was wondering if someone could help me? I have been looking around yesterday and today on the internet and found some examples but they didn't work for me. So I was wondering if some of you guys know how to fix this problem. I'm also quit new to HTML & CSS so maybe that's just the problem. Thanks for already looking into it!

Problem 1: I have made 2 div's one on the left side and the other on the right side using "float" with img on top and some text under it. But now if I copy the same thing under it again my image will be overruled and my text don't will show up. I also did give it a margin-bottom: 50px but that also don't work.

Problem 2: In my div box-text give I in the css a margin-top to but the text will not go down.

Visit problem

Here is HTML:

<body>
        <div id="content">
            <div class="head-text">My latest work</div>
                <div class="b1"> </div>
                <div class="b2"> </div>
                <div class="b3"><p><h3>Aangenaamklassiek</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>

            <div class="box-text">Text wont go down.</div>
                <div id="work">
                    <div class="box-left-img">
                        <div class="box-left-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>  
                    <div class="box-right-img">
                        <div class="box-right-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>


                    <div class="box-left-img">
                            <div class="box-left-text">
                                Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>  
                    <div class="box-right-img">
                        <div class="box-right-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>


                    <div class="box-left-img">
                        <div class="box-left-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>  
                    <div class="box-right-img">
                        <div class="box-right-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>



                </div>
        </div>
    </body>

Here is my css:

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

#content{
    width: 962px;
    margin: 0 auto; 
}

.head-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 1.5em;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 50px 0 20px 0;
    text-align: center;
}

.b1 {
    background-image: url(http://larsdejonge.nl/portfolio/img/jot.jpg);
    height: 290px;
    width: 470px;
    float: left;
}

.b2 {
    background-image: url(http://larsdejonge.nl/portfolio/img/not.jpg);
    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;
}

.box-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 1.5em;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 50px;
    text-align: center;
}

#work {
    width: 962px;
    margin: 0 auto;
}

.box-left-img {
    width: 470px;
    height: 290px;
    float: left;
    background-image: url(http://larsdejonge.nl/portfolio/img/dekroon.jpg);
    background-color: #fff;
}

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

.box-right-img {
    width: 470px;
    height: 290px;
    float: right;
    background-image: url(http://larsdejonge.nl/portfolio/img/fcu.jpg);
    background-color: #fff;
}

    .box-right-text {
        width: 430px;
        height: 100px;
        color: #6d6f6f;
        background-color: #fff;
        margin-top: 290px;
        margin-bottom: 50px;
        padding: 20px;
        float: left;
        font-size: 1.0625em;
        font-family: 'Montserrat', sans-serif;
        box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    }

Upvotes: 1

Views: 93

Answers (2)

FlatDesigner
FlatDesigner

Reputation: 43

I see you don't have the solution found out. Maybe you have it already fixed by the this time but I still wanna help you because I think have the solution for your first problem maybe:

This is the HTML that I used you can change it if you want to.

<body>
    <div id="content">
        <div class="head-text">My latest work</div>
            <div class="b1"> </div>
            <div class="b2"> </div>
            <div class="b3"><p><h3>Aangenaamklassiek</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>
    </div>

    <div id="container">
        <div class="head-text">Text wont go down.</div>
            <div id="box-left-img"></div>
            <div id="box-right-img"></div>
            <div id="box-left">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>
            <div id="box-right">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>

            <div id="box-left-img"></div>
            <div id="box-right-img"></div>
            <div id="box-left">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>
            <div id="box-right">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>  
    </div>
</body>

This is the CSS that I used you can change that as well it if you want to.

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

#content{
    width: 962px;
    margin: 0 auto; 
}

.head-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 1.5em;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 50px 0 20px 0;
    text-align: center;
}

.b1 {
    background-image: url(http://larsdejonge.nl/portfolio/img/jot.jpg);
    height: 290px;
    width: 470px;
    float: left;
}

.b2 {
    background-image: url(http://larsdejonge.nl/portfolio/img/not.jpg);
    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;
}

#container {
    margin: 0 auto;
    width: 960px;
}
#box-left-img {
    width: 470px;
    background: url(http://larsdejonge.nl/portfolio/img/dekroon.jpg) no-repeat;
    float: left;
    height: 290px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);

}
#box-right-img {
    width: 470px;
    float: right;
    background: url(http://larsdejonge.nl/portfolio/img/fcu.jpg) no-repeat;
    height: 290px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
#box-left {
    width: 470px;
    float: left;
}

#box-right {
    float: right;
    width: 470px;
}

#text {
    background-color: fuchsia;
    margin-bottom: 20px;
    color: #6d6f6f;
    padding: 20px;
    background-color: #fff;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    width: 430px;
}

Problem 2 couldn't I get fixed maybe you need to ask that in a different question?!

Greets, FlatDesigners

Upvotes: 0

Timothy Groote
Timothy Groote

Reputation: 8643

Your problem doesn't show up in all browsers, (chrome handles it all just fine)

It happens because IE is terrible at determining the height of float elements. To solve this, just encapsulate float element sections in another div with overflow:auto

      <div class="content_box">
         <div class="head-text">My latest work</div>
         <div class="b1"> </div>
         <div class="b2"> </div>
         <div class="b3"><p><h3>Aangenaamklassiek</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>
      </div>

CSS : 

    .content_box
    {
         overflow:auto;
    }

see this jsFiddle

Upvotes: 1

Related Questions