javascript - How can I make 3 boxes next to each other in my specific case? -
javascript - How can I make 3 boxes next to each other in my specific case? -
i want place 3 boxes next each other. box may have text within , image covering @ left 50% of each box.
you may wonder why asking here there lot of help elsewhere online. reason it's not working in particular case. whenever create div box or paragraph, contents underneath breaks downwards (doesn't remain same set). if @ code find have line of code: <marquee behavior="alternate">we coming soon, please check later.</marquee>
that marquee works fine, if create paragraph instead of (or wrapping paragraph div boxes) ordered lists under breaks downwards , set underneath each other. means box or paragraph can made, not allow other contents (under them) remain same.
[hope able explain problem properly, if not :my apology] can see work live here though paste code here. attachment shows want set boxes.
.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>7seas redovisning</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="big_wrapper"> <header id="top_header"> <h1><img src="img_akin/7seas.jpeg" id="logo" alt=""/><span class="header_name"><span class="seven">7</span>seas redovisning</span></h1> <p> <span class="mob_tele">mob: 076-9516926 <br /> tel: 040-133403</span><br /> info@7seasredovisning.se </p> </header> <nav id="top_menu"> </nav> <div id="new_div"> <!--only main content--> <section id="main_section"> <marquee behavior="alternate">we coming soon, please check later.</marquee> <div class="img_wrap"> <img src="img_akin/image_1st_body.jpg" width="650" height="312" alt=""/> </div> <ol> <li> <span class="style_number">1.</span> inkomstdeklaration<br /><br /><br /> <span class="style_number">2.</span> momsdeklaration<br /><br /><br /> <span class="style_number">3.</span> bolagsbildning<br /><br /><br /> <span class="style_number">4.</span> ekonomi konslut<br /><br /><br /> <span class="style_number">5.</span> lÖpande bÖkfÖring </li> <li> <span class="style_number">6.</span> bokslut & Årsredovisning<br /><br /><br /> <span class="style_number">7.</span> skattedeklaration<br /><br /><br /> <span class="style_number">8.</span> lÖneadministration<br /><br /><br /> <span class="style_number">9.</span> fakturering<br /><br /><br /> <span class="style_number">10.</span> 1 more </li> </ol> </div> <footer id="the_footer"> <ul> <li> © 7 seas redovisning <br /> en del av 7seas money transfer kb<br /> f-skatt registrerat <br /> org, nr: 969756-4079 <br /> seb företagskonto: 5502-1030132<br /> bg: 102-5006 </li> <li> besökadress: <a href="https://www.google.se/maps/place/skomakarebyn+8,+218+41+bunkeflostrand/@55.5592313,12.9325061,3a,75y,153.78h,90t/data=!3m4!1e1!3m2!1sufqg4doye4igl8w2atjpgg!2e0!4m2!3m1!1s0x4653a718b0946da5:0xd60c6ee131582f21!6m1!1e1" title="see on google map">skomakarebyn 8e<br /> 218 41 bunkeflostrand</a><br /> malmö, sweden <br /> follow on fb <!-- smartaddon begin --> <br /> <script type="text/javascript"> (function() { var s=document.createelement('script');s.type='text/javascript';s.async = true; s.src='http://s1.smartaddon.com/share_addon.js'; var j =document.getelementsbytagname('script')[0];j.parentnode.insertbefore(s,j); })(); </script> <a href="http://www.smartaddon.com/?share" title="share button" onclick="return sa_tellafriend('www.7seasredovisning.se','bookmarks')"><img alt="share" src="http://s1.smartaddon.com/s8.png" border="0" /></a> <br />designed & developed <a href="http://jabiralfatah.com/" title="visit website">jabir al fatah</a><br /> copyright @ 2014 <a href="http://dhbangladesh.com/"title="visit dh bangladesh">dh people's republic of bangladesh in sweden.</a> </li> <li> tel: 040-133403<br /> mob: 076-9516926<br /> e-mail: info@7seasredovisning.se<br/> <a href="http://7seasredovisning.se/">www.7seasredovisning.se</a><br/> <span id="webstat"> <script src="http://stats.webstat.se/assets/stat_isp2.php"></script> <script type="text/javascript"> <!-- document.write("<" + "script src=\"http://stats.webstat.se/statcounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colordepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>"); --> </script> </span> <!-- slut webstat.se kod --> </li> </ul> </footer> </div> </body> </html> .css:
*{ margin:0px; padding:0px; } #top_header h1 { font:bold 4em fantasy; margin-top:-20px; color:#006400; text-shadow:2px 2px 2px orange; } .header_name{ margin-left:80px; } .seven{ color:orange; font-size:1.2em; text-shadow:2px 2px 2px #006400; } #top_header p { margin-top:-100px; color:#00008b; float:right; font-family:euphemia; } .mob_tele{ font-size:12.5px; } h2{ font:bold 14px tahoma; } header,section,footer,aside,nav,article,hgroup{ display:block; } body{ width:100%; display:-webkit-box; display:-o-box; display:-moz-box; /* display:-ms-box; */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; box-pack:center; -webkit-box-pack:center; -moz-box-pack:center; -webkit-box-pack:center; -ms-box-pack:center; -o-box-pack:center; background-color:#e6e6fa; } #big_wrapper{ max-width:1200px; margin:20px auto; display:-webkit-box; display:-o-box; display:-moz-box; display:-ms-box; box-orient:vertical; -webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-box-orient:vertical; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; -ms-box-flex:1; background-color:white; -webkit-box-shadow: 0 0 2px 2px gray; } #top_header{ border:3px soild gray; padding:20px; } #logo{ padding-top:20px; } #top_menu{ border-top: 5px solid #20b2aa; border-radius:4px; box-shadow:2px 2px 2px #424242; color:black; } #new_div{ display:block; display:-moz-box; display:-o-box; display:-ms-box; box-orient:horizontal; -webkit-box-orient:horizontal; -moz-box-orient:horizontal; -ms-box-orient:horizontal; } #main_section{ /* border: 1px solid blue; */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; margin-top: 20px; margin-bottom: 20px; padding: 20px; / } #main_section li{ margin-left:12px; display:inline-block; font-family:euphemia; font-weight:bold; /* color:#d2691e; */ color:green; } .style_number{ font: italic 1.2em georgia, times, serif; font-weight:bold; color:#4169e1; } #main_section marquee{ font-family:segoe print; font-size:40px; font-weight:bold; margin-bottom:40px; color:#b22222; } .img_wrap{ float:right; position:relative; } .img_wrap::before{ background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%); background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%); background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%); background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%); background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%); content:"\00a0"; top:0px; left:0px; height:100%; width:100%; position:absolute; } #the_footer{ /* text-align:center; */ background:#f0f8ff; /* padding:20px; */ border-top:2px solid green; } #the_footer li{ list-style:none; display:inline-block; padding:40px; margin-left:35px; font-family:euphemia; font-size:13px; } #the_footer a{ text-decoration: none; } #the_footer a:hover{ text-decoration: underline; }
here's illustration started.
class="snippet-code-css lang-css prettyprint-override">.box { display: block; float: left; margin: 0 10px; border: 1px solid black; } class="snippet-code-html lang-html prettyprint-override"><div class="box">box 1</div> <div class="box">box 2</div> <div class="box">box 3</div>
javascript jquery html css
Comments
Post a Comment