html - Mysterious Line Break between divs. JSFiddle included -
html - Mysterious Line Break between divs. JSFiddle included -
was working on websites design , reason, there linebreak between 2 divs shouldn't exist. here jsfiddle http://jsfiddle.net/d593fdea/
i know design ugly right now, ignore of it. question has gap between div offerscontainer , recentwinnersheadlinecontainer.
it bugging me because gap shouldn't exist , have no clue why does. help appreciated, give thanks you!
html:
<html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <link href='http://fonts.googleapis.com/css?family=roboto+slab' rel='stylesheet' type='text/css'> </head> <body> <div id="maincontainer"> <div id="navcontainer"> <div id="logoimgcontainer"><img src="logo.png"></div> <p id="navlinks">prizes winners faq contact us</p> </div> <div id="slideshowcontainer"> <img src="slide1.jpg"> </div> <div id="offerscontainer"> <div class="offersarrowimg"> <img src="leftoffersarrow.jpg"> </div> <div class="offercontainer"> <img class="offerimg" src="offer1.jpg"> <div class="offerbtn">offer name</div> </div> <div class="offercontainer"> <img class="offerimg" src="offer2.jpg"> <div class="offerbtn">offer name</div> </div> <div class="offercontainer"> <img class="offerimg" src="offer3.jpg"> <div class="offerbtn">offer name</div> </div> <div class="offercontainer"> <img class="offerimg" src="offer4.jpg"> <div class="offerbtn">offer name</div> </div> <div class="offersarrowimg"> <img src="rightoffersarrow.jpg"> </div> </div> <div id="recentwinnersheadlinecontainer"> <p id="recentwinnersheadline">recent winners</p> </div> <div id="recentwinnerscontainer"> <div class="recentwinnercontainer"> <img class="recentwinnerimg" src="recentwinner1.jpg"> <p class="recentwinnername">firstname lastname</p> entered win <p class="recentwinnerprizename">prize name</p> </div> <div class="recentwinnercontainer"> <img class="recentwinnerimg" src="recentwinner2.jpg"> <p class="recentwinnername">firstname lastname</p> entered win <p class="recentwinnerprizename">prize name</p> </div> <div class="recentwinnercontainer"> <img class="recentwinnerimg" src="recentwinner3.jpg"> <p class="recentwinnername">firstname lastname</p> entered win <p class="recentwinnerprizename">prize name</p> </div> <div class="recentwinnercontainer"> <img class="recentwinnerimg" src="recentwinner4.jpg"> <p class="recentwinnername">firstname lastname</p> entered win <p class="recentwinnerprizename">prize name</p> </div> <div class="recentwinnercontainer"> <img class="recentwinnerimg" src="recentwinner5.jpg"> <p class="recentwinnername">firstname lastname</p> entered win <p class="recentwinnerprizename">prize name</p> </div> </div> <div id="recentwinnersmapcontainer"> </div> <div id="footer"></div> </div> </body> </html>
css:
#maincontainer { width:1000px; margin:0 auto 0 auto; } #navcontainer { width:1000px; height:75px; background-color:#3299bb; } #logoimgcontainer { float:left; margin:13px 0px 0px 20px; } #navlinks { float:right; margin: 15px 20px 0 0; font-family: 'roboto slab', serif; font-size:30px; color:#ffffff; } #slideshowcontainer { width:1000px; height:380px; background-color:#000000; } #offerscontainer { width:1000px; height:188px; background-color:blue; } .offercontainer { width:227px; height:188px; float:left; background-color:red; } #offerimg { width:227px; height:146px; } .offersarrowimg { float:left; } #recentwinnersheadlinecontainer { width:1000px; height:60px; background-color:#ff9900; } #recentwinnerscontainer { width:495px; height:320px; }
it's margin-top
property contained <p>
element.
you need add together code:
#recentwinnersheadlinecontainer p { margin-top: 0; }
here's fiddle updated: http://jsfiddle.net/d593fdea/1/
html css space spacing
Comments
Post a Comment