Menu
Hi, I think I only need to make a minor adjustment but with the ones I’ve tried I haven’t found a solution. HTML and CSS coding below. Thank you to those who can assist.
Details:
~ 2-column test page with: left sidebar with a width of 20%, main content, header, footer
~ Page width is 960px
~ 1 image in the sidebar
Problems:
~ The left sidebar width adjusts accordingly when the browser window size is changed from wide to narrow. However, the main content eventually shifts down quite a bit on the page as the browser window becomes more narrow leaving an empty space to the right of the sidebar. For the container I used max-width: 960px; instead of width: 960px because the sidebar did not change size accordingly with just using width: 960px.
~ Ideally I would like the sidebar height and main content height to always both be the same height but haven’t been able to accomplish this. Is this possible given they contain different amounts of text? Would I be best to set both with a fixed px height instead of using 100%?
[code=html]
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Test Page</title>
<link href=”screen.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”container”>
<header id=”header”>
<p>Alice In Wonderland</p>
</header>
<aside id=”sidebar”><img class=”imgalice” src=”alice.jpg” alt=”Alice in Wonderland”>
<p>Alice’s Adventures in Wonderland (commonly shortened to Alice in Wonderland) is an 1865 novel written by English author Charles Lutwidge Dodgson under the pseudonym Lewis Carroll. It tells of a girl named Alice falling through a rabbit hole into a fantasy world populated by peculiar, anthropomorphic creatures. The tale plays with logic, giving the story lasting popularity with adults as well as with children. It is considered to be one of the best examples of the literary nonsense genre. Its narrative course and structure, characters and imagery have been enormously influential in both popular culture and literature, especially in the fantasy genre.</p>
</aside>
<main id=”main”><p>The Caterpillar and Alice looked at each other for some time in silence. At last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>
<p>”Who are YOU?” said the Caterpillar.</p>
<p>This was not an encouraging opening for a conversation. Alice replied, rather shyly, “I—I hardly know, sir, just at present—at least I know who I WAS when I got up this morning, but I think I must have been changed several times since then.”</p>
<p>”What do you mean by that?” said the Caterpillar sternly. “Explain yourself!”</p>
<p>”I can’t explain MYSELF, I’m afraid, sir” said Alice, “because I’m not myself, you see.”</p>
<p>”I don’t see,” said the Caterpillar.</p>
<p>”I’m afraid I can’t put it more clearly,” Alice replied very politely, “for I can’t understand it myself to begin with; and being so many different sizes in a day is very confusing.”</p>
<p>”It isn’t,” said the Caterpillar.</p>
<p>”Well, perhaps you haven’t found it so yet,” said Alice; “but when you have to turn into a chrysalis—you will some day, you know—and then after that into a butterfly, I should think you’ll feel it a little queer, won’t you?”</p>
<p>”Not a bit,” said the Caterpillar.</p>
</main>
<footer id=”footer”>sidebar @ <a href=”https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland” title=”Wikipedia” target=”new”>Wikipedia</a> | lorem ipsum @ <a href=”http://www.fillerati.com/” target=”new”>www.fillerati.com</a></footer>
</div> <!– end .container –>
</body>
</html>
[CODE]
@charset “utf-8”;
#container {
max-width: 960px;
margin: 0 auto;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #000;
font-family: Baskerville, “Palatino Linotype”, Palatino, “Century Schoolbook L”, “Times New Roman”, serif;
color: #000;
}
#header {
background-color: #D6C2FF;
font-family: Baskerville, “Palatino Linotype”, Palatino, “Century Schoolbook L”, “Times New Roman”, serif;
font-size: xx-large;
font-weight: bolder;
text-align: center;
text-shadow: 0px 0px;
color: #FFFFFF;
letter-spacing: 2px;
word-spacing: 2px;
border: thin solid #000000;
clear: both;
width: 100%;
}
#sidebar {
width: 20%;
background-color: #FFCFDF;
margin-top: 20px;
margin-right: 5px;
margin-left: 0;
margin-bottom: 10px;
float: left;
clear: none;
font-family: Segoe, “Segoe UI”, “DejaVu Sans”, “Trebuchet MS”, Verdana, sans-serif;
font-size: small;
line-height: 18px;
padding: 5px;
border: thin solid #000000;
height: 100%;
}
.imgalice {
max-width: 100%;
height: auto;
}
#main {
width: 75%;
background-color: #CAFFED;
margin-top: 20px;
margin-right: 0;
margin-left: 0;
margin-bottom: 10px;
float: right;
font-family: Baskerville, “Palatino Linotype”, Palatino, “Century Schoolbook L”, “Times New Roman”, serif;
padding: 10px;
border: thin solid #000000;
height: 100%;
}
#footer {
background-color: #F0FFB7;
padding: 10px 0;
font-family: Constantia, “Lucida Bright”, “DejaVu Serif”, Georgia, serif;
position: relative;
clear: both;
text-align: center;
border: thin solid #000000;
width: 100%;
}