html5 - How can I keep my two sections on the same line? -
so i'm working on website design 2 sections stand right next each other, reason 1 section goes under other one. can me find problem? thanks!
html code:
<section id="sec1"> <img src="https://tse1.mm.bing.net/th?&id=oip.mbd6b4f30000f7e872ca4c55c2cedd6fao0&w=300&h=215&c=0&pid=1.9&rs=0&p=0&r=0" id="img1"> <h6 class="bodytext">watershed definition</h6> <p class="bodytext">a ridge or area of land separates waters flowing different rivers, basins, or seas</p> </section> <section id="sec2"> <img src="http://www.nature-education.org/estuary.gif" id="img1"> <h6 class="bodytext">estuary definition</h6> <p class="bodytext">an arm or inlet of sea @ lower end of river or body of water.</p> </section>
css code:
#sec1 { background-color: #75c776; width: 400px; height: 550px; margin-left: 300px; margin-top: 40px; border-radius: 5px; border-style: solid; clear: right; } #sec2 { background-color: #75c776; width: 400px; height: 550px; margin-left: 800px; margin-top: 40px; border-radius: 5px; border-style: solid; clear: left; }
you appear trying float them (from use of clear: left/right)?
you don't have float set though...
if float them both left, clear right on second only, should work. appear on top of each other if there's not enough horizontal space then.
Comments
Post a Comment