I am new to html and CSS, finally after some work I managed to create a layout, that will consist of menu (green part), some text content (yellow part). But unfortunately, I can't place any content in place, I want it to be. I dont know what am I doing wrong. I created div for content called obsah, and I cant place it inside panelcontent... Could anybody give me advice?
body {
text-align: center;
background-image: url(pattern_background_by_keyshabc-d6r3ots.jpg);
}
header {
background-color: black;
height: 80px;
width: 100%;}
#wrapper{
margin-left: 10%;
margin-right: 10%;
width: 80%;
height: 100px;}
#panelcontent {
float: left;
height: 100%;
background-color: yellow;
width: 100%;
}
#panelmenu {
float: left;
width: 15%;
height: 100%;
background-color: lime;
margin-left:auto;
margin-right:auto;
}
#footer {
float: left;
height: 20px;
width: 100%;
background-color: red;
}
#obsah {
position: relative;
left: 20%;
width: 50%;
} <!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header></header>
<div id="wrapper">
<div id="panelcontent">
<div id="panelmenu">
<nav></nav>
<div id="obsah">
<article> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. In dapibus augue non sapien. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Aliquam in lorem sit amet leo accumsan lacinia. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Mauris tincidunt sem sed arcu. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Fusce tellus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Praesent vitae arcu tempor neque lacinia pretium. Sed ac dolor sit amet purus malesuada congue. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. In convallis. Mauris metus. Praesent id justo in neque elementum ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis nibh at felis congue commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
In enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Mauris elementum mauris vitae tortor. Praesent in mauris eu tortor porttitor accumsan. Nullam eget nisl. Mauris elementum mauris vitae tortor. Integer tempor. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. In convallis.</article>
</div>
</div>
</div>
<div id="footer">
<footer></footer>
</div>
</div>
<!-- page content -->
</body>
</html>Ok, here's a fiddle of the layout you wanted: https://jsfiddle.net/mkarajohn/opfhzm0k/1/
I moved the #obsah element at the same level as the #panelmenu and then changed the following CSS
#panelcontent {
height: 100%;
background-color: yellow;
width: 100%;
/** Added `position: relative` to `#panelcontent` in order **/
/** to be able to position the `#panelmenu` absolute later **/
position: relative;
}
#panelmenu {
width: 15%;
background-color: lime;
/** Here we position this element absolutely **/
/** and we make it to have the full height of its parent by applying **/
/** top: 0 and bottom:0 **/
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
#obsah {
position: relative;
/** left a left margin that is equal to the width of #panelmenu **/
margin-left: 15%;
padding: 0 1rem;
}