html - Divs intersecting and refusing to display side by side when 'floated' -
i got purely css accordion work on number of webpages. wanted add 2 div elements above accordion , have them display side side. used float this, , moment did elements intersected so:
i tried specify width of container (once trying percentages , once pixel values), no good. have awful feeling missing obvious and/or i've made coding busy , there's conflict.
here's html:
<div class="aboutus"> <div class="ac-container-info left"> <label>about politeia</label> <div class="verticalline"> lorem ipsum dolor sit amet, quas vocent impedit id duo. brute errem id mei, ignota regione principes ne has. dicit admodum ocurreret cum ea, eius neglegentur vix ei, soleat semper deterruisset duo. ut graeci aliquam interesset has. qui iusto signiferumque id, vel idque nonumes suscipiantur an. eu oblique tibique mei, no novum eruditi sea. </div> <div 'clear:both'> </div> <div class="ac-container-links right"> <label>info links</label> </div> </div> <div 'clear:both'> </div> <div="accords"> <section class="ac-container"> <div> <input id="ac-2" name="accordion-1" type="checkbox"> <label for="ac-2">the rules</label> <article class="ac-large"> <p> here @ politeia, our rules pretty simple. know guys basics (respect, don't set things on fire, etc), we'll skip on , list need-to-know. <br> <br> if you're confused in rules or concerned rule-breaking, please feel free contact admin. we're here help! <br> <br> <br> <h>registration</h><br> <br> register ooc account! <br> <br> register character's name in proper caps (i.e. john smith). can register character full name (james dean), nickname + surname (jimmy dean), or alias if it's applicable (the sausage king). <br> <br> adult-oriented board, ask characters (and pbs) 18 years or older. <br> <br> <br> <h>activity</h><br> <br> have relaxed standards of activity. there no activity checks or posting demands. can post fifty times day or once month. <br> <br> admin may reach out after long stretch of time without activity ask if you're still interested in playing character, not asked more answer 'yes' or 'no.' <br> <br> exception our activity requirements (or lack thereof) in regards characters in important positions. character's absence noted ic , may result in ic consequences (a demotion, firing, etc). <br> <br> <br> <h>graphics</h><br> <br> playbys/face claims must real people. <br> <br> may use of note pb (models, musicians, actors, , forth). small-time models on dev art or otherwise, prefer have express permission use material graphics (example: rachel dashae has publicly said can use face pb). <br> <br> icons 200x300. not allow signatures @ time. </p> </article> </div> <div> <input id="ac-3" name="accordion-1" type="checkbox"> <label for="ac-3">the plot</label> <article class="ac-large"> <p>i need write this. </p> </article> </div> <div> <input id="ac-4" name="accordion-1" type="checkbox"> <label for="ac-4">frequently asked questions</label> <article class="ac-large"> <p>here answers questions might have had politeia. more questions , answers might added go along! <br> <br> <b>so time period politeia set in, anyway?</b><br> <br> politeia set in future, long after big ole war turned upside down. world's population lowered. radiation made areas uninhabitable , caused freaky side effects on people stuck around.<br> <br> however, major cultural shifts resulted war included greater appreciation 20th century , hellenistic time periods. it's why aesthetics of politeia have lot of shout-outs these eras.<br> <br> <br> <b>wait, have play character it's 1916? fashions , everything?</b><br> <br> nope! though aesthetic might 20th century, ideals of 20th century have not carried over. here there freedoms of modern ideals fun of old timey fashions, pretty much.<br> <br> fashions...weeeell, it's what's fashionable. it's hoity toity in society (i.e. aristocracy) caught wearing. doesn't mean character has dress way, if they're in lower tier of society. said character might weird looks more fashion-conscious members of society or other snobby sorts, though.<br> <br> if you'd read examples of 20th century fashion, check <url=http://www.vam.ac.uk/page/0-9/20th-century-fashion/>here</url>.<br> <br> <br> <b>are there limits on powers? how many character can have? powers banned?</b><br> <br> yes, there limits on powers, both in terms of how powerful character can , how many powers single character can have. @ moment, there aren't many powers outright banned. <br> <br> limitations in place allow wiggle room, , it's encouraged members discuss characters' abilities admin if have questions, concerns, or ideas want second opinion on before moving forward.<br> <br> <br> <b>is there weird futuristic slang need worry on politeia?</b><br> <br> have no plans turn <i>clockwork orange</i> or <i>juno</i> situation, not overseeing use of language. if want excuse, think of form of translation convention. makes easier , other readers grasp what's going on in posts. </p> </article> </div> <div> <input id="ac-5" name="accordion-1" type="checkbox"> <label for="ac-5">abilities</label> <article class="ac-large"> <p> <quote>banned</quote><br> <subquote>powers forbidden...</subquote><br> <br> <b>timeline manipulation</b> -- powers manipulate course of time (i.e. reversing events, interfering past, traveling future). powers allow character <i>see</i> events in past or potential events in future fine!<br> <br> <b>omnipotence/omnipresence/omniscience</b> -- no all-knowing, all-powerful, all-present characters. basically, no powers imply "sure thing."<br> <br> <b>permanent power negation/augmentation/absorption</b> -- permanent negation, augmentation, or absorption of character's powers forbidden. temporary negation, augmentation, , absorption fine. </p> </article> </div> </section> </div> </div> </div> and css:
/**************************************** *****************************************/ .right{float:right} .left{float:left} .ac-container-info { display: inline-block; width: 60%; position: relative; } .ac-container-links { display: inline-block; width: 40%; position: relative; } .verticalline { border-right: 1px dotted #bbb; } .ac-container { width: auto; margin: 10px auto 30px auto; position: relative; } .aboutus label { font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); letter-spacing: 2px; margin-bottom: 10px; } .ac-container label{ font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); letter-spacing: 2px; } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #f8f8f8; color: #777; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(../images/arrow_down.png) no-repeat center center; } .ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); } .ac-container input{ display: none; } .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow-y: auto; height: 0px; position: relative; z-index: 10; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container input:checked ~ article{ transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container article p{ font-style: normal; color: #777; text-align: justify; line-height: 23px; font-size: 14px; padding: 50px; margin: 10px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container article h { font-size: 20px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; } .ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 280px; } .ac-container input:checked ~ article.ac-large{ height: 550px; } .groupinfo quote { font-size: 20px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; } .groupinfo subquote { font-size: 15px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; letter-spacing: 1px; } .aboutus quote { font-size: 20px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; } .aboutus subquote { font-size: 15px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; letter-spacing: 1px; }
your explanation wasn't clear enough...please check debugged code , see if want:
body { overflow:scroll; } .right{ float:right; } .left{ float:left; } .ac-container-info { display: inline-block; width: 60%; position: relative; } .ac-container-links { display: inline-block; width: 40%; position: relative; } .verticalline { border-right: 1px dotted #bbb; padding:10px 30px 10px 30px; } .ac-container { width: 100%; margin: 70px auto 30px auto; position: relative; } .aboutus label { font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); letter-spacing: 2px; margin-bottom: 10px; } .ac-container label{ font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); letter-spacing: 2px; } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #f8f8f8; color: #777; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(../images/arrow_down.png) no-repeat center center; } .ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); } .ac-container input{ display: none; } .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow-y: auto; height: 0px; position: relative; z-index: 10; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container input:checked ~ article{ transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container article p{ font-style: normal; color: #777; text-align: justify; line-height: 23px; font-size: 14px; padding: 50px; margin: 10px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container article h { font-size: 20px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; } .ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 280px; } .ac-container input:checked ~ article.ac-large{ height: 550px; } .groupinfo quote { font-size: 20px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; } .groupinfo subquote { font-size: 15px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; letter-spacing: 1px; } .aboutus quote { font-size: 20px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; } .aboutus subquote { font-size: 15px; font-family: 'pathway gothic one', 'arial narrow', arial, sans-serif; letter-spacing: 1px; }<div style="direction: rtl; height: 100%; "> <div style="direction: ltr; padding: 3px;"> <div class="aboutus"> <div class="ac-container-info left"> <label>about politeia</label> <div class="verticalline"> lorem ipsum dolor sit amet, quas vocent impedit id duo. brute errem id mei, ignota regione principes ne has. dicit admodum ocurreret cum ea, eius neglegentur vix ei, soleat semper deterruisset duo. ut graeci aliquam interesset has. qui iusto signiferumque id, vel idque nonumes suscipiantur an. eu oblique tibique mei, no novum eruditi sea. </div> </div> <div class="ac-container-links right"> <label>info links</label> </div> </div> <div 'clear:both'> </div> <div> <section class="ac-container"> <div> <input id="ac-2" name="accordion-1" type="checkbox"> <label for="ac-2">the rules</label> <article class="ac-large"> <p> here @ politeia, our rules pretty simple. know guys basics (respect, don't set things on fire, etc), we'll skip on , list the need-to-know. <br> <br> if you're confused in rules or concerned rule-breaking, please feel free contact admin. we're here help! <br> <br> <br> <h>registration</h><br> <br> register ooc account! <br> <br> register character's name in proper caps (i.e. john smith). can register character full name (james dean), nickname + surname (jimmy dean), or alias if it's applicable (the sausage king). <br> <br> adult-oriented board, ask characters (and pbs) 18 years or older. <br> <br> <br> <h>activity</h><br> <br> have relaxed standards of activity. there no activity checks or posting demands. can post fifty times day or once month. <br> <br> admin may reach out after long stretch of time without activity ask if you're still interested in playing character, not asked more answer 'yes' or 'no.' <br> <br> exception our activity requirements (or lack thereof) in regards characters in important positions. character's absence noted ic , may result in ic consequences (a demotion, firing, etc). <br> <br> <br> <h>graphics</h><br> <br> playbys/face claims must real people. <br> <br> may use of note pb (models, musicians, actors, , forth). small-time models on dev art or otherwise, prefer have express permission use material graphics (example: rachel dashae has publicly said can use face pb). <br> <br> icons 200x300. not allow signatures @ time. </p> </article> </div> <div> <input id="ac-3" name="accordion-1" type="checkbox"> <label for="ac-3">the plot</label> <article class="ac-large"> <p>i need write this. </p> </article> </div> <div> <input id="ac-4" name="accordion-1" type="checkbox"> <label for="ac-4">frequently asked questions</label> <article class="ac-large"> <p> here answers questions might have had politeia. more questions , answers might added go along! <br> <br> <b>so time period politeia set in, anyway?</b><br> <br> politeia set in future, long after big ole war turned upside down. world's population lowered. radiation made areas uninhabitable , caused freaky side effects on people stuck around.<br> <br> however, major cultural shifts resulted war included greater appreciation 20th century , hellenistic time periods. it's why aesthetics of politeia have lot of shout-outs these eras.<br> <br> <br> <b>wait, have play character it's 1916? fashions , everything?</b><br> <br> nope! though aesthetic might 20th century, ideals of 20th century have not carried over. here there freedoms of modern ideals fun of old timey fashions, pretty much.<br> <br> fashions...weeeell, it's what's fashionable. it's hoity toity in society (i.e. aristocracy) caught wearing. doesn't mean character has dress way, if they're in lower tier of society. said character might weird looks more fashion-conscious members of society or other snobby sorts, though.<br> <br> if you'd read examples of 20th century fashion, check <url=http://www.vam.ac.uk/page/0-9/20th-century-fashion/>here</url>.<br> <br> <br> <b>are there limits on powers? how many character can have? powers banned?</b><br> <br> yes, there limits on powers, both in terms of how powerful character can , how many powers single character can have. @ moment, there aren't many powers outright banned. <br> <br> limitations in place allow wiggle room, , it's encouraged members discuss characters' abilities admin if have questions, concerns, or ideas want second opinion on before moving forward.<br> <br> <br> <b>is there weird futuristic slang need worry on politeia?</b><br> <br> have no plans turn <i>clockwork orange</i> or <i>juno</i> situation, not overseeing use of language. if want excuse, think of form of translation convention. makes easier , other readers grasp what's going on in posts. </p> </article> </div> <div> <input id="ac-5" name="accordion-1" type="checkbox"> <label for="ac-5">abilities</label> <article class="ac-large"> <p> <quote>banned</quote><br> <subquote>powers forbidden...</subquote><br> <br> <b>timeline manipulation</b> -- powers manipulate course of time (i.e. reversing events, interfering past, traveling future). powers allow character <i>see</i> events in past or potential events in future fine!<br> <br> <b>omnipotence/omnipresence/omniscience</b> -- no all-knowing, all-powerful, all-present characters. basically, no powers imply "sure thing."<br> <br> <b>permanent power negation/augmentation/absorption</b> -- permanent negation, augmentation, or absorption of character's powers forbidden. temporary negation, augmentation, , absorption fine. </p> </article> </div> </section> </div> </div> </div>
Comments
Post a Comment