I was given a test to replace all the div tags in an Html file with semantic Html5 tags. After replacing all the tags, my test failed in 2 places; I'll point them out below. In the test, it was also stated that the classes and id of the tags might give you a little context about the Tag that might be used the replace them.
Here is the initial code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 semantic codility task</title>
<meta name="description" content="HTML5 semantic codility task" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-menu">
<div class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</div>
<div class="menu-element">
About us
</div>
<div class="menu-element">
References
</div>
<div class="menu-element">
Contact
</div>
</div>
<div id="content-container">
<div id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
non nisl aliquet interdum at ut enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
</p>
</div>
<div id="content">
<div id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
volutpat.
</p>
</div>
<div class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</div>
<div class="site-block">
<div class="image-container">
<img alt="article related image" id="main-image" src="images/image.png" />
<div class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</div>
</div>
</div>
</div>
</div>
<div id="copyright-container">
<div id="copyright-content">
<p class="copyright">Copyright 1999-2020.</p>
<p>by Codility ® All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Here is the layout image :
Here is my final code with semantic changes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 semantic codility task</title>
<meta name="description" content="HTML5 semantic codility task" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav id="top-menu">
<span class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</span>
<span class="menu-element">
About us
</span>
<span class="menu-element">
References
</span>
<span class="menu-element">
Contact
</span>
</nav>
<main id="content-container">
<aside id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
non nisl aliquet interdum at ut enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
</p>
</aside>
<section id="content">
<section id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
volutpat.
</p>
</section>
<section class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</section>
<section class="site-block">
<figure class="image-container">
<img alt="article related image" id="main-image" src="images/image.png" />
<figcaption class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</figcaption>
</figure>
</section>
</section>
</main>
<footer id="copyright-container">
<article id="copyright-content">
<p class="copyright">Copyright 1999-2020.</p>
<p>by Codility ® All Rights Reserved.</p>
</article>
</footer>
</body>
</html>
I was getting error with id main-block and class copyright, The error was like this :
AssertionError: xpath for id: main-block is incorrect: {'/html/body/main/article/section[1]'}, this means that html5 DOM structure with this tag is not correct for SEO rules (xpath algorithm code: https://gist.github.com/ergoithz/6cf043e3fdedd1b94fcf)
and same for copyright.
What do I need to replace main-block and copyright tags? Thanks for reading.
Honestly not sure, this seems like a very specific issue with the class you're in, but it may serve you to look at this page not from the viewpoint of changing the old version, but how you would write it from scratch so it's semantic from the getgo.
It looks like you have a <section> tag around two other sections, which is unnecessary, though not incorrect. You also have your <aside> inside your main, which doesn't make much sense as the stuff that goes in aside is meant to be not main content.
the problem with this is that semantics are meant to create more meaning in an html document, so it's hard to say when they are being used incorrectly, excluding obvious misuses. Obviously, the footer doesn't go in the body. Obviously, the header doesn't go below the footer. But who's to say that an article needs to go in a section? Or that an article can't have a section? No one. In fact, both layouts are correct.
The real answer is going to come from the class you're taking, not a stranger unfamiliar with the specifics of this class.
Related
OVERVIEW
I am building a website to showcase my blockchain and cybersecurity projects I'd worked with. So far, I'd implemented two pages of my website using bootstrap v5.1.3. I'm no front-end developer, but still I wanted to build something of my own.
Currently, I'm writing the description of one of my projects, and later I will add some images into it.
PROBLEM
I'm currently facing the issue of an horizontal bar showing if I write too much paragraphs in the page and I don't know how to make it disappear.
I'm trying to solve this issue so that all the paragraphs are responsive and only appear within the viewport width of a screen, and don't overflow creating the horizontal bar.
Check the image below for a better explanation.
IMAGE
QUESTION
How can I solve this only using bootstrap v5.1.3?
WEBPAGE CODE
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/hack-font#3.3.0/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non nibh sit amet eros ullamcorper tincidunt. Curabitur sed imperdiet erat. In facilisis urna magna, ut mollis est posuere nec. Duis non neque vel libero dignissim dictum. Nullam scelerisque, sem porttitor dignissim blandit, enim felis condimentum enim, non cursus felis ex vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc lectus odio, finibus nec porta non, varius pulvinar eros. Aenean eget vulputate lorem, sed mollis ipsum. In mollis iaculis sem, quis sodales metus sodales quis. In nec efficitur libero, quis pharetra turpis. Nunc a felis vestibulum lacus feugiat euismod. Integer id diam a arcu dictum imperdiet nec at libero. Aliquam lorem dui, faucibus non posuere vel, venenatis vel augue. Aenean lorem ex, eleifend ut dictum a, semper nec risus. Nunc varius erat tortor, vitae sagittis sem vehicula non.
</p>
<p class="h6">
Aliquam erat volutpat. Pellentesque sagittis, nisi ac tempor lobortis, lacus neque posuere libero, vel maximus nibh dui non massa. Nulla at lectus vestibulum, tristique nisi at, vulputate ex. Vestibulum sit amet pharetra tortor. Sed felis nulla, finibus ut ipsum eget, pretium mollis quam. Proin urna metus, cursus non turpis vel, elementum blandit nulla. Nulla eu accumsan ipsum. Donec sodales tellus a turpis dapibus tincidunt. Praesent luctus vestibulum magna, ac feugiat metus ullamcorper eu. Mauris non elementum nunc, sed sagittis risus. Cras sed elit laoreet, faucibus ligula quis, tempus quam. Donec posuere eget eros eu pulvinar. Vestibulum justo augue, feugiat elementum erat sit amet, tempor porttitor urna. Integer malesuada mauris et ultricies sollicitudin.
</p>
<p class="h6">
Cras hendrerit quis velit vel molestie. Proin ut velit metus. Sed semper et neque non rhoncus. Cras semper dui eget eros tempus, sed malesuada nisi dignissim. Aliquam ante dolor, ultricies quis varius at, pellentesque nec urna. Mauris sit amet commodo nulla, ac malesuada lacus. Proin bibendum quis quam vel volutpat. Ut pulvinar tincidunt vehicula.
</p>
<p class="h6">
Phasellus sit amet vulputate neque, id mattis velit. Vivamus porttitor tellus ac est dictum lacinia. Aenean tincidunt tempus fringilla. Sed aliquam nibh ut turpis condimentum, eget malesuada nibh iaculis. Ut tincidunt at nisl vel tristique. Nam quam nunc, lacinia eget augue dictum, aliquet aliquam lectus. Aenean eleifend quam nec est tempus imperdiet.
</p>
<p class="h6">
In nec leo at tellus bibendum blandit sodales at neque. Sed vel dolor in tellus lobortis imperdiet venenatis in lectus. Ut ex ex, bibendum in fringilla et, vestibulum id mauris. Nam eu lorem nisi. Donec vitae fermentum est. Quisque sodales imperdiet felis, viverra consectetur enim egestas a. Duis leo orci, malesuada nec dolor ac, efficitur consequat dui. Aliquam lobortis commodo viverra.
</p>
<p class="h6">
Nunc vulputate ultricies metus in molestie. Mauris ultrices metus feugiat augue mollis ultrices. Quisque ac mattis enim, sed suscipit orci. Fusce eu enim tempor, bibendum ligula quis, faucibus ligula. Aenean nec iaculis tortor, eu suscipit sem. Proin in elit at lectus euismod lacinia. Quisque ac auctor felis, eget ultrices orci. Curabitur accumsan, massa dictum pellentesque feugiat, mauris velit tincidunt mi, ut porta nisl nibh id nisi. Nam non facilisis arcu. Aliquam eros est, elementum a leo sit amet, porttitor euismod ligula. Maecenas tellus massa, molestie ut ultrices at, finibus ac mauris.
</p>
<p class="h6">
Aliquam congue faucibus libero. Aenean sed suscipit ipsum. Aenean varius eleifend metus in pulvinar. Ut dapibus condimentum vehicula. Sed dictum arcu nulla, eget semper turpis fermentum at. Nam congue pretium rutrum. Mauris sit amet mauris sagittis, pulvinar nunc et, posuere diam.
</p>
<p class="h6">
Nunc tortor elit, interdum eget lacinia sed, tincidunt quis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nunc eu nibh pulvinar eleifend. Pellentesque porttitor feugiat placerat. In at felis est. Etiam scelerisque velit pharetra, blandit erat non, mattis ex. Aenean congue tortor nec diam maximus, eget auctor nisi accumsan. Sed at dignissim sem, eu placerat tellus. Curabitur lobortis dui nec lorem gravida pellentesque. Duis sagittis, tortor sit amet dapibus finibus, nisi lacus maximus tellus, nec convallis orci velit non libero. Cras sodales, sem in sodales tincidunt, nisi magna facilisis felis, imperdiet elementum erat turpis a dui. Duis non felis pretium, viverra dui eget, condimentum erat. Nunc lobortis convallis felis, ac scelerisque sem cursus a. Ut in gravida tortor. Cras porttitor sapien sem. Aenean cursus erat et libero scelerisque placerat.
</p>
<p class="h6">
Suspendisse potenti. Sed varius ipsum sem, imperdiet vehicula orci pharetra sit amet. Nulla facilisi. Integer faucibus sed tellus quis cursus. Donec lacinia varius ipsum, vitae bibendum justo pharetra vel. Nunc facilisis a dolor sit amet maximus. In nec leo iaculis, pharetra tortor ac, imperdiet arcu. Duis non rhoncus enim, vehicula tincidunt orci. Ut in augue at ante sagittis efficitur ac eget tortor. Nunc eget felis ac quam tempor volutpat. Phasellus id volutpat tortor. Sed cursus eros at interdum convallis. Morbi ullamcorper felis eget massa porttitor pulvinar sed vitae purus. Ut iaculis ante eget ipsum congue, ut efficitur diam condimentum. Etiam lobortis dolor est, sed fringilla diam placerat eget.
</p>
<p class="h6">
Vivamus consectetur, nisi in dapibus vehicula, ipsum eros congue nunc, a posuere nisl mauris vitae sem. Sed interdum placerat commodo. Quisque id molestie sapien. Vestibulum vitae tempus ligula. Morbi eu molestie risus. Vivamus ac sapien tincidunt, hendrerit nibh ut, sagittis lacus. Maecenas pellentesque elementum libero non pretium. Proin in sodales massa. Praesent eu blandit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
</html>
Please remove min-vw-100 class from your div
<div class="d-flex flex-column min-vh-100 wrapper">
I'm trying to make my first web page from memory after completing FCC HTML basics. Why do i keep getting warnings, saying (p element is not allowed here, same for b, head, and most other tags. I'm doing it exactly as ive been shown. This still displays, but the yellow on my Pycharm has me uneasy.
<!DOCTYPE html>
<html>
<head>
<title>This is my website</title>
</head>
<main>
<b>
<h1>This is my Header</h1>
<h2>This is where I describe my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros aliquet, convallis nulla vel, imperdiet mi. Fusce eu tellus nunc. Praesent consectetur in tortor nec eleifend. Nulla nisl neque, pretium sit amet faucibus sollicitudin, tincidunt et enim. Curabitur ipsum nisi, malesuada nec nisi eget, hendrerit ullamcorper ante. Sed pulvinar efficitur porttitor. Aliquam eleifend dapibus ipsum, dictum vestibulum lorem pellentesque eget. Aliquam efficitur nisl id sapien pulvinar interdum. Etiam molestie vulputate sapien a porttitor.
Nullam suscipit pellentesque augue. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur neque arcu, dignissim non massa in, pellentesque vehicula massa. Quisque imperdiet odio ligula, eu ornare diam blandit eu. Maecenas ac massa eu mi tempor mattis. Donec imperdiet eros justo, eu semper ex commodo sit amet. Quisque finibus velit vitae nibh consequat vulputate. Mauris venenatis egestas mauris sit amet viverra. Vestibulum venenatis iaculis lectus in placerat. Integer in ipsum nibh. Fusce vitae euismod dolor, a mollis lorem.
Maecenas feugiat accumsan ipsum, non lobortis arcu imperdiet id. Fusce pharetra dui et ultrices imperdiet. Nam sed ex ipsum. Cras at tellus lobortis, molestie leo et, pharetra neque. Nullam pharetra urna quis porta ullamcorper. Nam tempus nisl a arcu suscipit dignissim. Sed condimentum, orci ac dignissim pellentesque, nisi ante pulvinar nulla, non posuere elit ligula et erat. Maecenas eget est et arcu efficitur lacinia. Sed et nunc vel diam tincidunt laoreet. Sed ut lorem ac nulla ultrices porttitor ut vel est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu enim fringilla, vestibulum lectus vel, vestibulum erat. Vestibulum quis efficitur massa. Morbi ac turpis vestibulum, consectetur quam gravida, tincidunt leo. Vivamus molestie neque nec nibh ullamcorper aliquet. Pellentesque at nunc felis.</p>
</b>
</main>
<main></main> is not a supported HTML tag. It should be <body></body>.
update
You are about the “main” tag. However, I do see what may be your issue. It does not appear that your closes the “html” tag and you still need to add the “body” tags.
<!DOCTYPE html>
<html>
<head>
<title>This is my website</title>
</head>
<body>
<main>
<b>
<h1>This is my Header</h1>
<h2>This is where I describe my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros aliquet, convallis nulla vel, imperdiet mi. Fusce eu tellus nunc. Praesent consectetur in tortor nec eleifend. Nulla nisl neque, pretium sit amet faucibus sollicitudin, tincidunt et enim. Curabitur ipsum nisi, malesuada nec nisi eget, hendrerit ullamcorper ante. Sed pulvinar efficitur porttitor. Aliquam eleifend dapibus ipsum, dictum vestibulum lorem pellentesque eget. Aliquam efficitur nisl id sapien pulvinar interdum. Etiam molestie vulputate sapien a porttitor.
Nullam suscipit pellentesque augue. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur neque arcu, dignissim non massa in, pellentesque vehicula massa. Quisque imperdiet odio ligula, eu ornare diam blandit eu. Maecenas ac massa eu mi tempor mattis. Donec imperdiet eros justo, eu semper ex commodo sit amet. Quisque finibus velit vitae nibh consequat vulputate. Mauris venenatis egestas mauris sit amet viverra. Vestibulum venenatis iaculis lectus in placerat. Integer in ipsum nibh. Fusce vitae euismod dolor, a mollis lorem.
Maecenas feugiat accumsan ipsum, non lobortis arcu imperdiet id. Fusce pharetra dui et ultrices imperdiet. Nam sed ex ipsum. Cras at tellus lobortis, molestie leo et, pharetra neque. Nullam pharetra urna quis porta ullamcorper. Nam tempus nisl a arcu suscipit dignissim. Sed condimentum, orci ac dignissim pellentesque, nisi ante pulvinar nulla, non posuere elit ligula et erat. Maecenas eget est et arcu efficitur lacinia. Sed et nunc vel diam tincidunt laoreet. Sed ut lorem ac nulla ultrices porttitor ut vel est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu enim fringilla, vestibulum lectus vel, vestibulum erat. Vestibulum quis efficitur massa. Morbi ac turpis vestibulum, consectetur quam gravida, tincidunt leo. Vivamus molestie neque nec nibh ullamcorper aliquet. Pellentesque at nunc felis.</p>
</b>
</main>
</body>
</html>
I started to learn bootstrap a few days ago and now i'm trying to build my own website but i'm stuck with the layout.
I'm trying to get something like this :
But i'm stuck with this :
Here is my code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class = "row">
<div class="col-md-4 h-50" style="background:blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
<div class="col-md-8" style="background:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.
Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.
In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.
Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.
Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
</div>
</div>
<div class="row">
<div class="col-md-4 h-50" style="background:green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
</div>
</div>
</body>
</html>
How can I achieve this result ? I do not ask for a direct answer but some advice to help me.
Thank you guys.
<div class="row">
<div class="col-md-4">
<div> Blue div</div>
<div> Green div</div>
</div>
<div class="col-md-8">
<div> Red div</div>
</div>
</div>
The logic here is, you have to split your container into two columns. The 1st column takes, 4 medium columns as its width and the 2nd one takes 8 medium columns.
And you need to break the first column block into two rows.
Make a single row class and warp every thing into that ,Like to learn Bootstrap first Understand the Grid system strongly Then its easy to create Layouts
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class = "row">
<div class="col-md-4 col-sm-4 ">
<div style="background:blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
<div style="background:green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
</div>
<div class="col-md-8 col-sm-8" style="background:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.
Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.
In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.
Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.
Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
</div>
</div>
</div>
</body>
</html>
So I'm using Zurb Foundation and I want to create two vertically scrollable divs. llike this example
This is the html
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
and this is the css
.scrollablediv{
height:800px;
overflow-y: scroll;
}
However, When I scroll it, it scrolls both of it. I want them to scroll separately. How would I do that? Thanks in advance
If I understand your question correctly, all you have to do is add overflow: auto; to each child div, not the parent div.
Check it out: https://jsfiddle.net/f3utadqh/
That solves the scrolling issue, but adds scrollbars. A potential solution to that could be here https://stackoverflow.com/a/23771140/4856759
If you are actually trying to get two class "row" divs to scroll separately, try this. I added Lorem Ipsum and a height constraint so you can see how it works.
.scrollablediv {
height: 400px;
overflow-y: scroll;
}
.scrollablediv {
overflow-y: scroll;
height: 100px;
}
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet purus nunc. Curabitur et varius lectus, vel accumsan eros. Vivamus feugiat gravida massa eu euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris a fermentum arcu. Nunc faucibus est hendrerit nisl iaculis, id accumsan mi pretium. Duis porta erat leo, vitae porta ipsum dignissim vel. Mauris sed vestibulum lectus. Maecenas a risus eros. Nulla quis diam lectus. Nam elementum magna et dictum scelerisque. Quisque sit amet purus dolor. Nunc malesuada luctus nibh sed luctus. Ut lectus diam, consectetur sed libero eu, vestibulum cursus magna. Nam bibendum nisl ac est gravida, in consectetur ante tempor. Fusce tincidunt leo leo, sed sollicitudin metus condimentum sed.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
Okay, try this - each SECTION should now scroll independent of one another, try targeting each section separately?
.scrollablediv {
height: 400px;
}
.scrollablediv section {
overflow-y: scroll;
height: 100px;
}
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
</div>
</div>
i have been trying to get the singer/songwriter title to float to the right of the name on top of page. i also want a separate row with img and the paragraph of text to the right of that.
the problem i am now having is that i cant create a black navigation menu that floats to the right of the girls image and stays below the paragraph of text
ive coded the following up in dreamweaver, this is excluding the nav menu. When i view the document in dreamweaver it all displays correctly. however when i open it in a browser it displays wierd and the paragraph of text is displayed underneath the big image.
could somebody provide help as to why this is happening and once fixing it, how i would add a navigation menu directly underneath the paragraph of text, cheers
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:left;}
.alice{float:left;}
.info{float:left;}
</style>
</head>
<body>
<div class="wrapper">
<div id="top">
Content for id "top" Goes Here
</div>
<div class="logo">
<img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" />
</div>
<div class="title">
<h2>Singer/Songwriter</h2>
</div>
<div style="clear:both;">
</div>
<div class="alice">
<img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" />
</div>
<div class="info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit. <br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo. <br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti.
</p>
</div>
<!-- end info -->
<div style="clear:both;">
</div>
<div id="footer">
Content for id "footer" Goes Here
</div>
</div>
<!-- end wrapper -->
</body>
</html>
(EDIT: See this fiddle)
Hi dazza_au,
Very rough fix but will do the job: http://jsfiddle.net/MedDj/4/
Basically, you need to add a width to your floated elements if you want them to float next to each other.
Check out the live example above and let me know if you need a further explanation?
Regards,
Dan
Here's the code in case you need it straight away:
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="top">Content for id "top" Goes Here</div>
<div class="wrapper">
<div class="logo"><img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" /></div>
<div class="title"><h2>Singer/Songwriter</h2></div>
<div style="clear:both;"></div>
<div class="alice"><img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" /></div>
<div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit.
<br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo.
<br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti. </p>
<ul class="nav">
<li>Nav button one</li>
<li>Nav button two</li>
</ul>
</div><!-- end info -->
<div style="clear:both;"></div>
</div><!-- end wrapper -->
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>
CSS
.wrapper{min-width:800px;width:800px;}
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:right;padding:40px 10px 0 0; font-size:130%;}
.alice{float:left;width:400px; overflow:hidden;}
.info{float:left;width:400px;}
.info ul.nav{
list-style:none;
padding:0;
margin:10px 0;
overflow:hidden;
}
.info ul.nav li{
float:left;
padding-right:10px;
}
.info ul.nav li a{
background-color:#000;
color:#fff;
padding:10px;
text-decoration:none;
display:block;
}