Position elements side by side
Question
From my main page, the tables I've put in do not sit side by side as I make the window smaller. I've tried making the columns different sizes, the table different sizes, using in-line/block etc. What am I doing wrong?
It seems like this page works for a while then stops working after a while in IE 10/11. What I'm doing wrong?
I am a beginner; general tips/criticisms are welcome too. Here is my code:
/* Home page styling */ * { box-sizing: border-box; } body{ background-color:#c9d5e8; margin: 0; } .header{ color: #2c2f35; font-family: arial; font-weight: bold; font-variant: small-caps; text-align: center; letter-spacing: 5px; } .header a{ text-decoration:none; } .header a:visited{ color: #2c2f35; } ul { margin: 0; padding: 0; list-style-type: none; /* No bullet points */ overflow: hidden; /* Overflow clipped to fit area */ background-color: #333; width: 100%; } #workflow { background-color: #a0341e; font-style: oblique; } #contacts { float: right; background-color: #4CAF50; } li { float: left; border-right:1px solid #bbb; } li: last-child { border-right: none; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } /* Create three unequal columns that floats next to each other */ .column { float: left; padding: 10px; } /* Left and right column */ .column.side { width: 30%; } .column.side p{ font-size: 0.8em; } /* Middle column */ .column.middle { text-align: justify; font-family: arial, sans-serif; font-size: 1em; width: 40%; } .column.middle p{ padding: 1% 1%; border-left: 8px solid #43548E; background-color: #dddddd; } .column.side table { margin: 0%; padding: 0%; display: inline-table; float: left; font-family: arial, sans-serif; border-collapse: collapse; width: 50%; } .column.side.ql p { border: 1px solid #6B688E; padding: 1% 1%; margin: 0% 10%; text-align: center; font-size: 0.9em; background-color: #dddddd } #swbrd{ text-align: left; background: #898E5E padding: 5px; padding-left: 5px; border-left: solid 8px; border-color:#43548E; } caption{ font-size: 0.8em; font-weight: bold; } td, th { border: 1px solid #dddddd; margin: 0 0 0 0; text-align: left; padding: 0px; font-size: 0.8em; } tr:nth-child(even) { background-color: #dddddd; } iframe { display:block; width:100%; } h3{ text-align:center; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } footer { text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other*/ @media (max-width: 600px) { .column.side, .column.middle { width: 100%; }
<html> <head> <title>SLMC Intranet</title> <link rel="stylesheet" href="style1.css"> <meta charset="utf-8"> <meta name="author" content="Jonathan Fang"> <meta name="description" content="Home page for Star Lane Medical Centre intranet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="header"> <h1><a href="./index.html">SLMC intranet</a></h1> </div> <nav> <ul> <li><a href="./pages/doctorclinics.html"> Clinics </a><li> <li><a href="./pages/locums.html"> Locums </a><li> <li id="workflow"><a href="#"> Workflow </a><li> <li><a href="./pages/documents.html"> Documents </a><li> <li><a href="./pages/policies.html"> Policies </a><li> <li><a href="./pages/elearning.html"> E-Learning </a><li> <li id="contacts"><a href="./pages/contacts.html">Contacts</a></li> </ul> </nav> <main> <div class="row"> <div class="column side"> <h3 id="swbrd"><span id="span">Switchboard</span></h3> <table> <caption>Consulting Rooms:</caption> <tr> <th>Room</th> <th>Name</th> <th>Ext</th> </tr> <tr> <td>2</td> <td>Clinical Room</td> <td>5222</td> </tr> <tr> <td>3</td> <td>Jerry Gomes</td> <td>5301</td> </tr> <tr> <td>4</td> <td>Dr Chiu</td> <td>5304</td> </tr> <tr> <td>5</td> <td>Clinical Room</td> <td>5305</td> </tr> <tr> <td>6</td> <td>Dr Pang</td> <td>5366</td> </tr> <tr> <td>7</td> <td>Dr Edung</td> <td>5307</td> </tr> <tr> <td>8</td> <td>Dr Fang</td> <td>5308</td> </tr> <tr> <td>9</td> <td>Dr Smith</td> <td>5309</td> </tr> <tr> <td>10</td> <td>Dr Ekundayo</td> <td>5302</td> </tr> <tr> <td>11</td> <td>Dr Lad</td> <td>5303</td> </tr> <tr> <td>12</td> <td>Clinical Room</td> <td>5312</td> </tr> <tr> <td>13</td> <td>Kay-Deen</td> <td>5313</td> </tr> </table> <table> <caption>1st Floor:</caption> <tr> <th>Room</th> <th>Name</th> <th>Ext</th> </tr> <tr> <td>16</td> <td>Clinical Room</td> <td>5216</td> </tr> <tr> <td>17</td> <td>Clinical Room</td> <td>5217</td> </tr> <tr> <td>18</td> <td>Clinical Room</td> <td>5218</td> </tr> <tr> <td>19</td> <td>Clinical Room</td> <td>5219</td> </tr> <tr> <td>20</td> <td>Clinical Room</td> <td>5220</td> </tr> <tr> <td>25</td> <td>Doctors room</td> <td>5221</td> </tr> <tr> <td>-</td> <td>Reception</td> <td>5200</td> </table> <table> <caption>Reception:</caption> <tr> <th>Line</th> <th>Ext</th> </tr> <tr> <td>Doctors & AUA only</td> <td>5000</td> </tr> <tr> <td>Ramila 5322</td> <td>5322</td> </tr> <tr> <td>Work Station 1</td> <td>5002</td> </tr> <tr> <td>Work Station 2</td> <td>5003</td> </tr> <tr> <td>Work Station 3</td> <td>5005</td> </tr> <tr> <td>Work Station 4</td> <td>5007</td> </tr> </table> <table> <caption>Reception:</caption> <tr> <th>Line</th> <th>Ext</th> </tr> <tr> <td>Doctors & AUA only</td> <td>5000</td> </tr> <tr> <td>Ramila 5322</td> <td>5322</td> </tr> <tr> <td>Work Station 1</td> <td>5002</td> </tr> <tr> <td>Work Station 2</td> <td>5003</td> </tr> <tr> <td>Work Station 3</td> <td>5005</td> </tr> <tr> <td>Work Station 4</td> <td>5007</td> </tr> </table> <table> <caption>Reception:</caption> <tr> <th>Line</th> <th>Ext</th> </tr> <tr> <td>Doctors & AUA only</td> <td>5000</td> </tr> <tr> <td>Ramila 5322</td> <td>5322</td> </tr> <tr> <td>Work Station 1</td> <td>5002</td> </tr> <tr> <td>Work Station 2</td> <td>5003</td> </tr> <tr> <td>Work Station 3</td> <td>5005</td> </tr> <tr> <td>Work Station 4</td> <td>5007</td> </tr> </table> </div> <div class="column middle"> <p>Welcome to the staff homepage. Essential information that you may need during your stay at Star Lane Medical Centre may be found on this site. This intranet will be your first point of resource and is intendeded for employees only.</p> <h3>Surgery Calander</h3> <iframe src="https://calendar.google.com/calendar/embed?src=jonafandango%40gmail.com&ctz=Europe/London" style="border: 3px" width="600" height="600" frameborder="0" scrolling="no"></iframe> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column side ql"> <h3>Quick Links</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p> </div> </div> </main> <footer>@2017</footer> </body> </html>
1 answers
solution1
0 2017-12-20 00:39:59
There are a couple of open source resources I recommend. One is Bootstrap by Twitter at GetBootstrap.com
It is super easy to learn, and solves a lot of CSS questions for you.
All you do is add the bootrap.css and bootstrap.js either locally to your project or as links to their location on the internet, check out their "Getting Started" section. Then check out their "Examples" you will see GRIDS that behave like how you describe in your section, plus it's beautiful.
This is how you would accomplish your grids that don't stack when you shrink the window, after installing Bootstrap to your projects masterpage or section.
<div class="container">
<div class="row">
<div class="col-sm">
<table>
table here
</table>
</div>
<div class="col-sm">
<table>
another table here
</table>
</div>
<div class="col-sm">
<table>
third table here.
</table>
</div>
</div>
</div>
Then check out the themes if you want to make things look really polished and professional.
Check out the COMPONENTS area to start using some really pretty objects, prebuilt for you.
The second resource is called DataTables at https://datatables.net/ this is another beautiful data layout open source tool that really takes you to the next level and is super easy to use.
Both BootStrap and DataTables rely on installing JQuery. If you are using Visual Studio you can install all three of these using the NuGet Package Manager.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.