I'm pretty sure a large scoop of people on this forum have some HTML/CSS experience. You can use this thread to post your HTML/CSS problems and get answers from me aswell has other people on this forum. Right now I'm having trouble with matching my <aside> height with the <article> or <section> element. Basicly I wanna fill the green space the same way the <article> element does. But I don't know how to do it, and most solutions are really complicated. Does anybody know how to get this to work? (See picture below)
Problem there is that aside's height is genuinely not the same as article. I'm no HTML expert though (I really really hate it), for me to accomplish the same I'd simply be using a 2x2 table with the top left cell set to have a colspan of 2 effectively giving me a single cell with 2 cells underneath. But that is because I am an incompetant fool that didn't know there was a section, article or aside tag and is a total div when it comes to attempting to use div tags.
Those tags are completely new in HTML5. They basically work the same way the div tag did. If you use a div tag now days, you're considered a noob with a few exceptions.
When it comes to web development, I've found it to be very rare not to find a solution with a quick search, and it usually lands me on StackOverflow. http://stackoverflow.com/questions/12959172/how-to-fit-height-of-aside-to-body-height
I did not find that in my search. But if the aside was in my body... I wouldn't be creating this thread. I should also note that if I set aside to 100% height. It sets aside to 100% height of the browser window height for some reason, and not 100% height of section.
Okay, I see the issue now. HTML is easier to read when child elements are indented The bottom line is that you're gonna need a wrapper, and that wrapper is a div. I found this instead. http://stackoverflow.com/questions/...v-to-match-the-height-of-another-floating-div I applied the solution that can handle either one being taller here: http://jsfiddle.net/0m4e1mfj/
Code: <!DOCTYPE html> <html> -build- launchpad 0.4.8 <head> <title>Launchpad</title> <link href="lp.ico" rel="shortcut icon" > <link rel="icon" href="lp.ico" type="image/x-icon"> <!-- styles, m8--> <style> .floaty { padding:50px 5% 0% 10% } </style> <style> p.small { font-size:16px; text-rendering:optimizelegibility; padding:0% 10% 0% 10% } </style> <style> p.footer { font-size:10px; color:#ffffff; text-rendering:optimizelegibility; padding:15px 10% 15px 10% } </style> <style> .col { width: 100%; padding: 0px 8% 0px 8%; } </style> <style> #container { padding:0px 0px 20px 0px; } </style> <style> .footer { width: 100%; position: fixed; opacity:0.6; bottom: -10px; height: 50px; background-color: #000000; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--SEARCH--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> input[type=text], textarea { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; border:#fff 1px solid; outline:none; width:40%; height:35px; padding: 5px 3px 5px 10px; /* margin: 5px 1px 3px 0px; */ border: 1px solid #DDDDDD; -moz-border-radius: 25px; border-radius: 25px; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 30px 15px 30px 15px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); font-size:25px; -moz-border-radius: 10px; border-radius: 10px; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--COMMON--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> .common { background-position: 0px -865px; height: 146px; width: 391px; overflow: hidden; display: block; /*Transition*/ -webkit-transition: All 0.4s ease; /*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--FACEBOOK--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #facebook { background: #000000 url('facebook.png'); } #facebook:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--WIRED--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #wired { background: #000000 url('wired.png'); } #wired:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--YOUTUBE--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #youtube { background: #000000 url('youtube.png'); } #youtube:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--OATMEAL--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #oatmeal { background: #000000 url('oatmeal.png'); } #oatmeal:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--XKCD--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #xkcd { background: #000000 url('xkcd.png'); } #xkcd:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--/g/--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #gchan { background: #000000 url('gchan.png'); } #gchan:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--BEAMNG--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #beamng { background: #000000 url('beamng.png'); } #beamng:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--APPLE--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #apple { background: #000000 url('apple.png'); } #apple:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--WIKIPEDIA--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #wikipedia { background: #000000 url('wikipedia.png'); } #wikipedia:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--THEVERGE--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #theverge { background: #000000 url('theverge.png'); } #theverge:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--STEAM--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #steam { background: #000000 url('steam.png'); } #steam:hover { background-position: 0px 100%; } </style> <!-- @@@@@@@@@@@@@@@@@@@@@@==--POLYGON--==@@@@@@@@@@@@@@@@@@@@@@@ --> <style> #polygon { background: #000000 url('polygon.png'); } #polygon:hover { background-position: 0px 100%; } </style> <!-- we bootstrap now --> <link rel="stylesheet" href="bootstrap.min.css"> </head> <!-- ----------------------------------------------------------------------------------------------------------------- --> <body> <div class="floaty"><img src="Launchpad.png" height="80px" width="80px" alt="LaunchpadLogo">     <img src="logotype.png" height="35px" width="252px" alt="Logotype pls"></div> <center> <p class=small>Get started.</p> <div class="bar"> <form method="get" action="http://www.google.com/search" target="_blank"> <span><input type="text" name="q" placeholder="Google Search..." height="20px" width="30%"></span> </form> </form> </div> <hr style=width:60%;/> <div class="col"> <div class="col-md-6"> <a href="http://www.facebook.com" class="common" target="_blank" id="facebook"></a><br> </div> <div class="col-md-6"> <a href="http://www.youtube.com" class="common" target="_blank" id="youtube"></a><br> </div> <div class="col-md-6"> <a href="http://www.wired.com" class="common" target="_blank" id="wired"></a><br> </div> <div class="col-md-6"> <a href="http://www.theoatmeal.com" class="common" target="_blank" id="oatmeal"></a><br> </div> <div class="col-md-6"> <a href="http://www.xkcd.com" class="common" target="_blank" id="xkcd"></a><br> </div> <div class="col-md-6"> <a href="http://boards.4chan.org/g/" class="common" target="_blank" id="gchan"></a><br> </div> <div class="col-md-6"> <a href="http://www.beamng.com/forum/" class="common" target="_blank" id="beamng"></a><br> </div> <div class="col-md-6"> <a href="http://www.apple.com/au/" class="common" target="_blank" id="apple"></a><br> </div> <div class="col-md-6"> <a href="http://en.wikipedia.org/wiki/Main_Page" class="common" target="_blank" id="wikipedia"></a><br> </div> <div class="col-md-6"> <a href="http://www.theverge.com" class="common" target="_blank" id="theverge"></a><br> </div> <div class="col-md-6"> <a href="http://store.steampowered.com" class="common" target="_blank" id="steam"></a><br> </div> <div class="col-md-6"> <a href="http://www.polygon.com" class="common" target="_blank" id="polygon"></a><br> </div> </div> <!-- DO NOT DELETE CONTAINER DIV; USED IN PLACE OF FOOTER MARGIN --> <div class=container> </div> <br> <br> <br> <footer> <p class=footer>  works, get off my dick</p> </footer> </center> <p class=col>:)</p> </body> </html> Actual working thing here: View attachment lp.zip
I saw that. The only thing wrong with it is that is a pure visual hack, and the actuall element is taller than it shows. My plans we're to dock links at the bottom of aside. But that is an easy fix if it's pure visual.
Bump... So I finaly figured it out how to make <aside> be the same height as <article> with some of my mates. It was actually really simple. All I had to do was add 'position: relative;' to <section>, then add 'position: absolute;' and 'height: 100%;' to <aside>. Demo: http://jsfiddle.net/yx7t2j7g/2/ The only con with this, is that, if the content in <aside> is larger than in <article>. Then <article> won't resize to fit the height of <aside>. This can be fixed by just switching it around and repositioning aside. I hope this helps other people trying to recreate something similar to this.
