I know it's much to read but I hope anybody takes the time to help me. Thanks!!!
This is a pice of my code from my responsive website.
<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width:1227px) and (min-width:769px) {
html {
background-color:rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left:7px;
padding-right:4px;
list-style-type:none;
}
main {
margin-left:210px;
}
nav {
width:200px;
min-height:600px;
position:absolute;
border-style:solid;
border-width:1px;
border-color:black;
margin-right:10px;
background-color:white;
}
#book_cover {
width:100%;
}
#book_informations {
display:table;
width:100%;
}
#book_left {
margin-right:20px;
float:left;
width:300px;
display:table-header-group;
}
#book_middle {
margin-right:20px;
width:500px;
float:left;
display:table-footer-group;
}
#book_right {
float:left;
width:300px;
border-style:solid;
border-width:1px;
padding:5px;
display:table-row-group;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li><br>
<li class="li_navigation_left">Test2</li><br>
<li class="li_navigation_left">Test3</li><br>
<li class="li_navigation_left">Test4</li><br>
<li class="li_navigation_left">Test5</li><br>
<li class="li_navigation_left">Test6</li><br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="http://lorempixel.com/g/400/200/">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein <a href="">Test-Text</a>.</p></div>
</div>
</div>
</main>
</body>
</html>
The CSS is for the layout between 769px and 1227px. Within this dimensions I want the layout look like this:
The left "column" in the main (excluding the navigation on the left side) should be fixed size, ca. 250 px. The right "column" (the big Lorem-ipsum-placeholder-text) should be variable (perhaps width in %) and fill the space between left "column" and right browser border.
The problem is, I'll have to do it without changing the HTML code. I only can change the CSS code.
I tried this with display:table;, display:table-row-group;… But that doesn't work.
Does anybody know what I'm doing wrong?
What you need to use is @Media ruling in your css in order to maintain both resolutions and to make sure that your html will adapt depending on what resolution the user is using.