html - Disappearing divs and odd positioning when using float -
i have 2 problems , wondering if me? have been looking around yesterday , today on internet , found examples didn't work me. wondering if of guys know how fix problem. i'm quit new html & css maybe that's problem. thanks looking it!
problem 1: have made 2 div's 1 on left side , other on right side using "float" img on top , text under it. if copy same thing under again image overruled , text don't show up. did give margin-bottom: 50px don't work.
problem 2: in div box-text give in css margin-top text not go down.
here 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 doing? in todays project made funny ore not because 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 doing? in todays project made funny ore not because random text</div> </div> <div class="box-right-img"> <div class="box-right-text"> hello fellers how doing? in todays project made funny ore not because random text</div> </div> <div class="box-left-img"> <div class="box-left-text"> hello fellers how doing? in todays project made funny ore not because random text</div> </div> <div class="box-right-img"> <div class="box-right-text"> hello fellers how doing? in todays project made funny ore not because random text</div> </div> <div class="box-left-img"> <div class="box-left-text"> hello fellers how doing? in todays project made funny ore not because random text</div> </div> <div class="box-right-img"> <div class="box-right-text"> hello fellers how doing? in todays project made funny ore not because random text</div> </div> </div> </div> </body> here 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); }
i see don't have solution found out. maybe have fixed time still wanna because think have solution first problem maybe:
this html used can change if 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 doing? in todays project made funny ore not because 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 doing? in todays project made funny ore not because random text </div> </div> <div id="box-right"> <div id="text"> hello fellers how doing? in todays project made funny ore not because 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 doing? in todays project made funny ore not because random text </div> </div> <div id="box-right"> <div id="text"> hello fellers how doing? in todays project made funny ore not because random text </div> </div> </div> </body> this css used can change if 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 fixed maybe need ask in different question?!
greets, flatdesigners
Comments
Post a Comment