Related
In the following example I am trying to create a layout where the navigation will:
Always stay sticky to the top when scrolling down
Always stay left (not all the way left of the browser window) from content which a person is able to read
Prevent any space from being taken up by the actual navigation element's size
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I tried using the right property (on the nav selector) to see if I could use it to make it stick to the container with the actual content inside but it does not do anything at all. Most webpages I could find with a navigation to the sides tend to touch the browsers sides and this is not the solution I am looking for, which makes it difficult for me to find a solution to this problem.
What I intend to make the page look like:
Here is my solution. I wrapped nav and main in an extra container, giving it the class name some-container-inside. In css, I changed all my edits. Hope this is what you need.
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
/*margin-left: auto;*/ /*delete this it*/
/*margin-right: auto;*/ /*delete this it*/
width: 100%;
}
main h1 {
margin-top: 0; /*add this it*/
}
nav {
display: table; /*add this it*/
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
margin-right: 25px; /*add this it*/
margin-left: 25px; /*add this it*/
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container-inside {
display: flex; /*add this it*/
justify-content: center; /*add this it*/
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<div class="some-container-inside">
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
</div>
This code you try .
hope can help you.
i add position property on some class tag.
ex:header h1,nav . and new class some-container.
header h1 {
text-align: center;
position: absolute;
right: 850px;
top: 50px;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
z-index: 100;
top: 135px;
left: 480px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container {
position: relative;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 1: HTML / CSS
The changes I made in:
HTML: The NAV element is in the MAIN element
CSS: On the NAV element set style margin-left: -230px; and margin-bottom: -130px;
In this version, if you add a new menu item, you must manually set the margin-bottom:
If you want this to be done automatically see Version 2 below in this post
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
margin-bottom: -130px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 2: HTML / CSS / JS
You can add new items to the navigation and the JS will make the necessary changes so that the navigation is always displayed in the right place.
Important: The JS code must be added at the bottom of the page code
var nav = document.getElementsByTagName('nav')[0];
nav.setAttribute('style', 'margin-bottom:-' + (nav.offsetHeight + 30) + 'px');
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
<li>Contacts</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I am creating a self-help website for practice purposes only. I'm having trouble placing an 'aside' column (containing relevant quotes throughout history) on the right-side of my main content (excluding title & footer).
The 'float' property places the aside column to the right of all the content, but places it at the bottom. I have tried using 'flexbox' and this seems to solve the problem regarding the 'aside' element, but it places the footer vertically on-top of the content (& covering part of it) instead of horizontally at the bottom, along with moving the header to the left of the content (it should be at the top under the static nav-bar). This is what it does:
Can anybody help me? I'd really appreciate it.
body {
display: flex;
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
font-family: garamond, serif;
}
#navbar {
position: fixed;
right: 0;
left: 0;
}
.links {
margin: 8px;
padding: 16px;
background-color: orange;
-webkit-border-radius: 75%;
text-decoration: none;
color: black;
font-weight: 900;
transition: opacity 0.5s linear;
}
.links:hover {
opacity: 0.30;
width:
}
header {
font-size: 25px;
padding-top: 30px;
color: orange;
text-shadow: 8px 8px 16px grey;
}
#section1 {
padding-top: 8px;
}
#section2 {
padding-top: 16px;
padding-bottom: 16px;
}
section p {
text-align: justify;
}
#asideh2 {
text-align: center;
}
aside {
font-size: 12px;
width: 15%;
text-align: justify;
float: right;
}
footer {
justify-content: space-between;
background-color: #d3d3d3;
font-size: 12px;
padding: 8px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Self-Help Emporium</title>
</head>
<body>
<nav id="navbar">
<a class="links" id="link1" href="#">Home</a>
<a class="links" id="link2" href="#">About</a>
<a class="links" id="link3" href="#">Blog</a>
<a class="links" id="link4" href="#">Contact</a>
<a class="links" id="link5" href="#">Disclaimer</a>
</nav>
<header>
<h1>Self-Help Emporium</h1>
<h2>Your Trusted Source for Self-help Material</h2>
</header>
<article>
<section id="section1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
<section id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
</article>
<form>
</form>
</main>
<footer>
<span>Mathew J. M. | 2018 ™</span>
<span>Last updated: 11/09/2018</span>
</footer>
<aside>
<h2 id="asideh2">Self-Help Quotes:</h2>
<p>No matter where you are in life, you’ll save a lot of time by not worrying too much about what other people think about you. The earlier in your life that you can learn that, the easier the rest of it will be.</p>
<p>Our only limitations in life are those we set up in our own minds.</p>
<p>Focus on what you can control: your actions. How you react to negative feelings will be the key to your success.</p>
<p>Don’t Take Anything Personally. Nothing others do is because of you. What others say and do is a projection of their own reality, their own dream. When you are immune to the opinions of others, you won’t be the victim of needless suffering.</p>
</aside>
</body>
</html>
Edited: As you can see in the screenshot, the footer is vertical and is covering part of the main content. The header has been moved to the left of the main content. This has been caused by using 'flexbox'. If I don't use 'flexbox', the 'Self-Help Quotes' in the 'aside' element is placed under the content and not at the side.
I have solved this by adding a 'div' container with flexbox. I have kept the heading, nav-bar and footer outside of the flexbox container.
Note: In the picture below I have yet to add space and style for the 'aside' element.
You can use flexbox display: flex with fixed or sticky position position: fixed.
I'm creating a webpage that will have a long list of questions. I'm separating the questions using divs so that I can get the page to jump to the correct section, including the section at the top of the page. The problem is that the header doesn't scroll with the content like it was before I started adding content. Before adding content, the header would scroll as soon as the page started scrolling. Now, it delays until you get to the Service Time Questions radio buttons. I've searched online to see what would cause a delay in scrolling a header, but haven't found any usable results.
Here's my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="Layout.css">
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div class="header">
<h1>Sample Page</h1>
</div>
<div class="menu">
<ul>
<li>CMS ID & Auditor Name</li>
<li>Service Time Questions</li>
<li>Narrative Questions</li>
<li>Diagram Questions</li>
<li>Photo Questions</li>
<li>Estimatics Questions</li>
</ul>
</div>
<div class="content">
<div id="cmsID" class="subcontent">
<form action="./audit_submitted.php" method="post">
<h3>CMS ID & Auditor Name</h3>
<br/><br/>
<p> Enter CMS ID:
<input type="text" name="cmsID" size="25" maxlength="25" value=""/>
<br/><br/>
Auditor Name:
<input type="text" name="auditorName" size="25" maxlength="25" value=""/>
<br/><br/>
Select Carrier:
<select name="carrierID" required>
<option value="">Select...</option>
<option value = "0">GAIG/AMIG</option>
<option value = "1">Nat Gen</option>
<option value = "2">SoCal AAA</option>
<option value = "3">QBE</option>
</select>
</p>
</form>
<br/><br/><br/>
</div>
<div class="subcontent" id="serviceTime">
<br/>
<h3>Service Time Questions</h3>
<br/><br/>
<input type="radio" name="answer" value="1"> Yes
<input type="radio" name="answer" value="0"> No
<input type="radio" name="answer" value="1"> N/A
<br/><br/>
</div>
<div class="subcontent" id="narrative">
<br/>
<h3>Narrative Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="diagram">
<br/>
<h3>Diagram Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="photos">
<br/>
<h3>Photo Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="estimatics">
<br/>
<h3>Estimatics Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
</div>
<div class="footer">
© Sample Company 2016
</div>
</body>
</html>
And here's my CSS:
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
position: absolute;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 100%;
position: fixed;
padding-top: 20%;
z-index: -1;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 100%;
font-size: 1em;
float: right;
padding: 1%;
padding-top: 10%;
padding-bottom: 20%;
position: absolute;
z-index: -1;
margin-left: 10%;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
position: fixed;
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 10%;
background-color: #505050;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
Made a few adjustments to your stylesheet. Using fixed and absolutes in the positions was causing most of the problem. Give definite heights to each div makes a difference.
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
height: 120px;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 500px;
float: left;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 500px;
font-size: 1em;
float: left;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding-top: 20%;
width: 100%;
background-color: #505050;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A
Just change you CSS in the html, body for overflow-x: hidden to overflow: hidden and add #estimatics{margin-bottom: 200px}
Thanks to Jeff, I was able to track down what was wrong. His answer didn't fix the issue, but it made the root cause more obvious.
I had to change the height: 100%; in .content to min-height: 100%;.
I also added display: inline-block; to the end of .content.
Finally, I had to add background-color: #F8e8d2; to the .subcontent section because the subcontents were causing discoloration on the content div.
These updates fixed it so that the header scrolls when I start scrolling the page, and my jump links work perfectly.
I have the following code. Jfiddle is here. As seen, the bottom borders, what resemble <HR> tags extend the entire length of the page.
I would like to limit the borders of <h1> and <h2> tags to be only 30% of the page. While <h3> tags remain extending across the entire page. Is this possible with css?
EDIT: with a follow up question, how would I change the css on the <h3> tag so that under the border is roughly one line of white space the same size of the font as <h3>?
HTML
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<DIV id='content'>
<h3>Main Title</h3>
<h2>Sub Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum arcu non egestas.
</p>
<h2>Code Section</h2>
<pre>
<xmp>
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<h3>Main Title</h3>
<h2>Sub Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut
suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum
ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi
semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar
justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros
pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia
tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere
nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet
mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus
fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis
augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor
a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem
. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo,
accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices
placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum
arcu non egestas.
<h2>Code Section</h2>
<pre>
</pre>
</BODY>
</HTML>
</xmp>
</pre>
</DIV>
</BODY>
</HTML>
CSS
#content pre {
padding: 1em;
border: 1px dashed #2f6fab;
color: black;
background-color: #f9f9f9;
white-space: pre;
margin: 1em 0px;
display: block;
font-family: monospace,Courier;
line-height: 1.1em;
width:70%;
}
#content h3{
font-size: 188%;
line-height: 1.2em;
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
#content h1, h2 {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
You can use width: 30% for your first question, and margin-bottom: 1.2em for your second.
Here is your fiddle.
You can do something like this. http://jsfiddle.net/n5qRS/1/
<h1><span>Hello World</span></h1>
css
h1 span {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
display: block;
width: 30%;
}
as for the second question, add a margin bottom to the h3 the same as the line height of the h3.
It is very odd that you are having your h3 as a the Main Title and h2 as the subtitle (that is reversed of how it "should" be). This fiddle uses pseudo-elements to get the border.
#content h1:after, h2:after {
content: '';
display: block;
width: 30%;
height: 0;
margin: 0 auto;
border-bottom: 1px solid #aaa;
}
The margin-bottom is added in that fiddle to the h3 for your follow-up.
Help, please.
The code - just a styled pre and a styled div (using float and clear) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ie bug</title>
<style type="text/css">
<!--
pre {
background-color: #FFFFCC;
border: 2px dashed #FF6666;
padding-top: 7px;
padding-bottom: 8px;
padding-left: 10px;
margin: 10px;
float: left;
padding-right: 10px;
clear: both;
}
div {
float: left;
clear: both;
}
-->
</style>
</head>
<body bgcolor="#D6D6D6">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus viverra interdum. Etiam ut ornare nulla. Praesent gravida blandit aliquam. Nulla facilisi. Suspendisse vel augue ligula. In interdum, purus et pellentesque tempus, urna tortor malesuada massa.
<h3>Description</h3>
Mauris quis est erat, a tempus dolor. Duis faucibus ultricies volutpat. Aliquam erat volutpat. Nulla et consectetur est. Sed eleifend ante ac tellus feugiat sed scelerisque nisi vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nunc eget velit vel metus feugiat facilisis. Donec vel risus augue, ut mattis sem. Proin elementum libero ut lectus adipiscing semper. Proin et nibh enim.
<h3>Code</h3>
Phasellus sodales risus a lectus gravida tincidunt. Nulla sit amet enim ante, vel semper felis. Nullam enim mi, feugiat et porttitor tempus, auctor sed velit. Vivamus ac metus neque, in feugiat velit. Nam vitae dignissim eros. Praesent eros risus, pellentesque rutrum molestie sit amet, volutpat a mauris. Quisque ipsum turpis, placerat gravida aliquam et, placerat at leo.
</div>
<pre><em><Firefox bug : the right margin is 0 px instead of 10 px></em>
Vivamus eu mi nulla. Cras ac neque in ante aliquet ultricies eget id risus. Curabitur ut massa metus. Etiam dapibus fringilla diam, id lacinia tortor blandit eu. Nunc commodo commodo dui, eget malesuada purus cursus tempor. Quisque felis tellus, vulputate vitae ullamcorper sit amet, suscipit non augue. Integer vitae condimentum ante. Donec eu nisl magna. Nam ipsum lectus, dapibus a volutpat nec, rutrum sit amet eros. Phasellus velit est, adipiscing a interdum at, commodo id elit.
</pre>
<div>
<h3>Ie6 bug</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies, erat in varius ornare, diam mi semper nisi, eu sagittis mi diam at nisl. Aenean euismod nisl in enim interdum gravida. Maecenas congue, neque non imperdiet dictum, eros arcu ultricies mauris, et rhoncus ligula tortor nec nibh et convallis nulla tempus vel. Morbi ac leo magna, vitae semper felis. Donec tincidunt nunc quis lacus aliquet tempor. Nulla facilisi.
</div>
</body></html>
Firefox won't display the margin in the pre tag (yellow box in image) :
on the other hand ie6 displays the last div as shown :
Changing :
div {
float: left;
clear: both;
}
to :
div {
clear: both;
}
solved the ie6 bug. Still no margin in ff though.
EDIT 2013.12.24: well it was a bug fixed at some point - now FF works. Needless to add that IE still has the same bug.