Hi guys, I have a problem where I am trying to push my data inside of the categories TD to the top of the TD instead of it being centered in the TD. Here is the link to my website: www.thetotempole.ca
Here is my HTML code:
<html>
<head>
<style>
body {
font-family: Verdana, Arial, Sans-serif;
padding:0;
margin:0;
}
#body {
width:100%;
margin:0 auto;
padding:0px;
max-width: 768px;
}
#categories {
float:top;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" bgcolor="lightgrey" id="body" border="1">
<tr>
<td colspan="2">
<img style="width:100%; max-width: 768px; padding:0px; margin:0px;" src="images/totempolebanner.gif">
</td>
</tr>
<tr>
<td style="width:80%;">
<h3>Newest Article</h3>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</td>
<td style="width:20%;">
<div id="categories"
<h4>Categories</h4>
<ul>
<li>News</li>
<li>Movies</li>
<li>Music</li>
<li>Video Games</li>
<li>Health</li>
</ul>
</div>
</td>
</tr>
</table>
</body>
Give that table cell the CSS, vertical-align:top.
jsFiddle example (image removed from fiddle for easier viewing)
Try
#body td {
vertical-align: top;
}
First close properly your div categories tag. And then you only need to give to your div an absolute position, and top 0px;
#categories {
position: absolute;
top: 0px;
}
Related
I am creating a navigation panel that'll stay fixed when scrolling down. Here's the code.
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
And here's the css
header {
position: fixed;
max-width:960px;
}
.logo {
float: left;
}
nav {
float: right;
}
I want to have the logo on the right side and the navigation menus on the right side.
Right now, the float seem to work, but the nav elements appear right after the logo instead of being floated to the right edge.
If I remove the position:fixed code from header, the floating seems to work fine.
This would be the solution using flexbox instead of float:
header {
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
}
.logo {
align-self: flex-start;
}
nav {
align-self: flex-end;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
And you will need to remove the clear: both; from the HTMl. Let me know if it works!
As mentioned by #AngelMdez, Flexbox is a better way to go than Floats, position: fixed should work all the same; just keep in mind that you should specify a width so the element itself uses the space you expect.
After that you can remove all the float and clear properties and it should be fine.
body {
margin: 0;
}
header {
position: fixed;
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
background-color: gray;
}
.content {
padding-top: 70px;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Original Example with Floats
header {
position: fixed;
width: 100%;
max-width: 960px;
background-color: lightgray;
height: 60px;
}
.logo {
float: left;
}
nav {
float: right;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
To answer your question: Most HTML elements have default styling provided by the browser called the User Agent. The <header> has a default display value of display: block;. An element with display: block grows to its maximum width relative to its container.
In this case the container of <header> is the <body> which takes its width from the <html> which takes up the whole viewport.
Because you've set the max-width to 960px the element will grow to only 960px. This works fine, as the width is normally taking up the whole viewport. But as soon as you set an absolute position, in this case `fixed, the element is taken out of the normal document flow. Because it's now sticking to a fixed position. Meaning that it has no parent with a width. So it loses its inherited width by its parent ( the body ).
To solve your problem with the code you've already written, just add a width to the element. Because you've already set a max-width: 960px; you can tell the element to grow to 100% with: width: 100%;. It will stop at 960px because that's its maximum-width:
header {
position: fixed;
width: 100%;
background: blue;
}
a {
color: white;
}
.logo {
float: left;
}
nav {
float: right;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
I've made a basic parallax website and I am looking to put a simple navigation bar on the top right of the screen. When I load up the website in my browser, the link (which at the moment is linked to #) won't allow me to click it until I reach the class .section. If it is touching any of the images that have the parallax effect, it becomes opaque, and won't allow me to click. I had a feeling it had something to do with bad placement, and even when I moved it around it seemed to have no effect. It also won't float to the right. Here is some of the HTML and CSS:
body, html {
height: 100%;
margin:0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url('../AlignedResonance/mountainsvg.svg');
min-height: 100%;
}
.pimg2 {
background-image: url('../AlignedResonance/tree.jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('../AlignedResonance/lake.jpg');
min-height: 400px;
}
.section {
text-align:center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-dark {
background-color: #282e34;
color:#ddd;
}
.ptext {
position:absolute;
top:50%;
width: 100%;
text-align: center;
color:black;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Aligned Resonance</title>
<link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
</ul>
<div class="pimg1">
<!-- class ptext -->
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Text 2
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Text 3
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
</body>
</html>
Sorry if I don't have a correct format etc., as I am new to HTML as well as this site.
Try updating the z-index for your navbar class:
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
z-index: 1;
}
I'm using display: table-* to style a basic structure.
#page {
display: table;
width: 1000px;
margin: 0 auto;
}
#events,
#righ_sidebar {
display: table-cell;
}
#events {
width: 75%;
}
#righ_sidebar {
width: 25%;
}
<div id="page">
<div id="events">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="righ_sidebar">
<iframe id="up2europe" marginheight="5" marginwidth="5" src="https://www.up2europe.eu/widget/go/181d4bdc08289da3d78b79ee5f9e7e2d"></iframe>
</div>
</div>
The problem is that the iframe from #righ_sidebar it moves down the content from #events. How to use iframe and display table-* together, but correctly aligned?
You can do it with the Flexbox:
#page {
display: flex; /* displays flex-items (children) inline */
width: 1000px;
margin: 0 auto;
}
#events {
flex: 3; /* 75% */
}
#righ_sidebar {
flex: 1; /* 25% */
}
<div id="page">
<div id="events">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="righ_sidebar">
<iframe id="up2europe" marginheight="5" marginwidth="5" src="https://www.up2europe.eu/widget/go/181d4bdc08289da3d78b79ee5f9e7e2d"></iframe>
</div>
</div>
add style float:left; for '#events' and float:right; for #righ_sidebar
Recently, I have been working on a simple website for a small landscaping business as my first test starting as a web developer. Aware of my small amount of skills, the client does not care much for the site to be insanely detailed; he just wants his information to be accessible on the Internet since he isn't confident in his ability to manage social media himself.
I've run into a somewhat common problem from what I've seen, but every answer I try doesn't seem to work out. The problem is, while creating a sample/template with googled images and sample text to form a layout, my background image is covering the background color assigned to the footer, which I don't want. Can someone help me with this?
P.S. I'm aware there are a LOT of things that aren't finished in this code and I believe that I've seen most of them (ex. link targets and urls), but feel free to point them out so I can make note of all of them
body, html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
background-image: url("../Images/firepit.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#Logo {
font-size: 3em;
font-style: italic;
background-color: #064501; /* Dark Woodrow Green */
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 100px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 3.5%;
}
footer {
background-color: #064501; /* Dark Woodrow Green */
}
footer p {
float: left;
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Woodrow Lawn and Turf</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../CSS/index.css">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet">
</head>
<!-- DEVELOPER NOTES -->
<!--
- Keywords and description meta are still subject to change by the client.
- Make sure to add correct target attributes and file paths to the nav links.
- All images used in this mockup are subject to copyright currently.
- Make sure to add alternate font families to the font-family style.
-->
<body>
<header>
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<nav>
<ul id="Navigation">
<li>About Us</li>
<li>|</li>
<li>Lawn Stuff</li>
<li>|</li>
<li>Dirt Stuff</li>
<li>|</li>
<li>Flower Bed Stuff</li>
<li>|</li>
<li>Patio Stuff</li>
<li>|</li>
<li>Firepit Stuff</li>
<li>|</li>
<li>Commercial and Business Stuff</li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="Footer">
<footer>
<p id="Copyright">© Copyright Woodrow Lawn and Turf LLC 2017</p>
<ul>
<li>Contact:</li>
<li>(999)999-9999</li>
<li>|</li>
<li>stuffcompany#comp.net</li>
</ul>
</footer>
</div>
</body>
</html>
Add this to your code.
footer::after {
display: block;
content: '';
clear: both;
}
You're floating the content of footer, therefore removing them from the flow of the document.
The above code will clear the floats.
Try using the awesome power of flex-box!
footer {
display:flex;
flex-direction:row;
justify-content: space-between;
background: #064501; /* Dark Woodrow Green */
height:auto;
padding: 0 10px;
}
footer li{
list-style:none;
display:inline;
}
First pull the background stuff from the body, html rule set (in the CSS) and make a rule set for body only.
Then add a clearfix that can be used to prevent elements from collapsing.
Use the developing tools in your browser to inspect html elements and the CSS. If you point at the element source code in the developers tools and the element is not highlighted, it is most likely collapsing. Place a div with the class clearfix at the end of the element to fix it.
body,
html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
}
body {
background-image: url("https://vignette1.wikia.nocookie.net/recipes/images/8/85/Firepit.jpg/revision/latest?cb=20140404181547");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#Logo {
font-size: 3em;
font-style: italic;
background-color: #064501;
/* Dark Woodrow Green */
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 100px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 3.5%;
}
#Footer,
footer {
background-color: #064501; /* Dark Woodrow Green */
}
footer p {
float: left;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
<header>
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<nav>
<ul id="Navigation">
<li>About Us</li>
<li>|</li>
<li>Lawn Stuff</li>
<li>|</li>
<li>Dirt Stuff</li>
<li>|</li>
<li>Flower Bed Stuff</li>
<li>|</li>
<li>Patio Stuff</li>
<li>|</li>
<li>Firepit Stuff</li>
<li>|</li>
<li>Commercial and Business Stuff</li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="Footer">
<footer>
<p id="Copyright">© Copyright Woodrow Lawn and Turf LLC 2017</p>
<ul>
<li>Contact:</li>
<li>(999)999-9999</li>
<li>|</li>
<li>stuffcompany#comp.net</li>
</ul>
<div class="clearfix"></div>
</footer>
</div>
I'm trying to get my divs to be side by side, so that the first and the second would be side by side and so on..
I cant seem to get it looking like that.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>USS Vaja 4</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p
{
color: rgb(100,40,15);
font-size: 16px;
text-indent: 35px;
font-family: verdana;
}
</style>
</head>
<body>
<h1 style="color:#A05E03;text-transform:uppercase;">Lorem ipsum</h1>
<div id="nav">
<ul>
<li>USS</li>
<li>FERI</li>
<li>DKUM</li>
</ul>
</div>
<div id="vsebina">
<div id="slika"></div>
<div id="prvi" class="vrh">
<h2>Odstavek 1</h2>
<p>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="drugi" class="vrh">
<h2>Odstavek 2</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tretji" class="dno">
<h2>Odstavek 3</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="cetrti" class="dno">
<h2>Odstavek 4</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="peti" class="dno">
<h2>Odstavek 5</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="sesti" class="dno">
<h2>Odstavek 6</h2>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="commodo">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
And here is my css file:
h2
{
background-color:DarkOrange;
font-family:arial;
font-variant:small-caps;
font-weight:bold;
padding:0px 0px 0px 22px;
font-size:20px;
color:white;
}
ul
{
list-style:url('pika.png');
}
.commodo
{
font-weight:bold;
font-style:oblique;
}
#prvi
{
text-align:justify;
}
#drugi
{
text-align:center;
}
a:link
{
color:#B96600;
text-decoration:none;
font-size:18px;
}
a:visited
{
color:#B96600;
text-decoration:none;
font-size:18px;
}
a:hover
{
color:red;
text-decoration:underline;
font-size:18px;
}
a:active
{
color:#B96600;
text-decoration:none;
font-size:18px;
}
div
{
width:300px;
margin:0px 20px 0px 20px;
padding:5px 10px 0px 10px;
}
div#prvi, div#drugi
{
border:4px dashed silver;
height: 220px;
}
div#prvi>p, div#drugi>p
{
height:150px;
overflow:scroll;
}
#prvi
{
float: left;
}
#drugi
{
float: left;
}
#tretji
{
float: left;
clear: left;
}
#cetrti
{
float: left;
}
#peti
{
float: left;
clear: left;
}
#sesti
{
float: left;
}
How can I make it work?
Have a look here for a super-simple solution.
http://learnlayout.com/inline-block.html
You may use something like this:
.myDiv1{
float:left;
}
.myDiv2{
float:left;
}