#wrapper {
\t margin: 0 auto;
\t background:none;
\t width:90%;
}
.content {
\t /*top: 0;
\t left:0;*/
\t font-size:14px;
\t color:#000;
\t font-weight: 100;
\t font-family:tahoma;
\t padding: 20px;
\t background-color:rgba(255, 255, 255, 0.3);
\t margin: 0 auto;
\t width:calc(40% - 40px);
\t margin-bottom:20px;
\t float: left;
\t position:relative;
background-color:red;
}
.sidebar {
\t /*top: 0;
\t left:0;*/
\t font-size:14px;
\t color:#000;
\t font-weight: 100;
\t font-family:tahoma;
\t padding: 20px;
\t background-color:rgba(255, 255, 255, 0.3);
\t margin: 0 auto;
\t width:calc(60% - 40px);
\t margin-bottom:20px;
\t float: left;
\t position:relative;
background:yellow;
}
.header {
\t width: calc(100% - 40px);
\t background-color:rgba(255, 255, 255, 0.5);
\t margin: 0 auto;
\t padding: 20px;
\t margin-top:-10px;
}
<div id="wrapper">
\t <div class="header">
\t <h1>Title Here </h1>
\t
\t <ul class="topnav" id="myTopnav">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Textures</a></li>
<li><a href="#">Stock Photos</a></li>
<li><a href="#">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
\t </ul>
\t <script>
\t function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
\t
\t </div>
\t
\t
\t <div class="content">
\t
\t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
\t
\t </div>
\t
\t <div class="sidebar">
\t
\t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
\t
\t </div>
</div>
HTMLコード –
追加 –